父子組件間傳值
- 父組件—>子組件：
1.父組件使用 v-bind 綁定變量并賦值給變量。
2.在子組件里使用 props 來(lái)接收父組件傳遞過(guò)來(lái)的值牵敷。- 子組件—>父組件：
1.子組件通過(guò)$emit()方法向外派發(fā)事件扁远，傳遞參數(shù)似芝。
this.$emit('事件名',傳遞的參數(shù));
2.父組件通過(guò)監(jiān)聽子組件派發(fā)的事件來(lái)獲得參數(shù)。
監(jiān)聽 @事件名="方法名" 方法名（value）{ .... //value=傳遞來(lái)的參數(shù) }
父組件取到值以后改變數(shù)據(jù)
<div id="root">
<div>
<input type="text" v-model="todoValue"/>
<button @click="handleBtnClick">提交</button>
</div>
<ul>
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="DeleteItem">
</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props: ['content' ,"index"],
template: "<li @click='Clickde'>{{content}}</li>",
methods:{
Clickde:function () {
this.$emit("delete",this.index);
}
}
}
var app = new Vue({
el: "#root",
components: {
TodoItem: TodoItem
},
data: {
todoValue: "",
list: []
},
methods: {
handleBtnClick: function() {
this.list.push(this.todoValue);
this.todoValue = ""
},
DeleteItem:function (index) {
this.list.splice(index,1);
}
}
})
</script>
- 父—>子： 父組件v-bind：變量名=“js表達(dá)式” 子組件：props獲取
單項(xiàng)數(shù)據(jù)流: 子組件不能直接修改父組件傳遞來(lái)的參數(shù)例
**錯(cuò)誤示范**
修改Object的值會(huì)導(dǎo)致別的引用了該對(duì)象的子組件內(nèi)數(shù)據(jù)的變化嵌赠，
用在子組件內(nèi)復(fù)制一份該對(duì)象，修改子組件內(nèi)自己的data來(lái)代替
image.png
