vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例
模仿v-model實現案例
我是一串要和內部名字聯動的一串文字(父組件)
父組件改變值帶動(父組件)點一下試試.sync方案實現案例
這是父組件的東西。利用這個框改變值，看看有沒有傳到子組件，也可以改子組件看看這里有變化沒
// v-model方案 你寫上一個v-model的時候其實就是自動監聽了input事件并且把取到的值賦值給當前值.
Vue.component('new-input', {
props: ['value'],
data: function() {
return {}
},
template: '是個好人：',
methods: {},
computed: {
newName: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
}
});
// 模擬v-model 他的意義在于沒有里邊沒有input框也想實現這種,用在組件需要顯示關閉的時候比較方便
// 這個意義重大.
Vue.component('two-model', {
props: ['show'],
data: function() {
return {
}
},
template: '
點擊！！！顯示/隱藏下方的名字可以影響父組件(子組件)Army-海軍(子組件)
',methods: {
toggleShow() {
this.nameShow =!this.nameShow
}
},
computed: {
nameShow: {
get() {
return this.show;
},
set(value) {
this.$emit('input', value);
}
}
}
});
// 這里必須監聽這個 update:name這個事件這個時候才能這樣子寫:name.sync="name"
// 同時要加上在子組件里監聽這個變量.否則只能子組件改變父組件,不能雙向綁定
// 還是用v-model更好理解和方便些吧
Vue.component('three-input', {
props: ['name'],
data: function() {
return {
newName: this.name
}
},
template: ' 你的名字：',
methods: {
changeInput(val) {
this.$emit("update:name", this.newName);
}
},
computed: {},
watch: {
name() {
this.newName = this.name;
}
}
});
new Vue({
el: '#app',
data: {
name: 'Army-海軍',
showName: true
},
methods: {
getNewName: function(newName) {
this.name = newName;
},
changeShowName(val) {
this.showName = val;
},
toggleShowName() {
this.showName = ! this.showName
}
}
});
直接復制到自己頁面去測試即可。代碼是最好讀的。
總結
以上是生活随笔為你收集整理的vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 眼图观测实验报告_眼图观察测量实验
- 下一篇： html5倒计时秒杀怎么做,vue 设