vue父子组件之间通信实例
一、父组件向子组件传递数据
①获取数据并在父组件上绑定数据
②在子组件使用props接收父组件传递过来数据
③将接收的数据绑定到子组件模板
二、子组件向父组件传递数据
①在子组件上定义一个事件 如 @click='handleItemClick'
②在这个方法里面使用this.$emit方法提交一个自定义事件，如 this.$emit("delete",this.index);
③在父组件监听这个自定义事件 如： @delete="handleItemDelete"
④在这个事件的方法里面操作父组件的数据 ：如
handleItemDelete: function() {
this.list.splice(index,1)
}
<body>
<div id="app">
<input type="text" v-model="inputValue" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item :content="item"
:index="index"
v-for="(item, index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props: ['content', 'index'],
template: "<li @click='handleItemClick'>{{content}}</li>",
methods: {
handleItemClick: function() {
this.$emit("delete",this.index);
}
}
}
var app = new Vue({
el: '#app',
components: {
TodoItem: TodoItem
},
data: {
list: [],
inputValue: ''
}
})
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleItemDelete: function() {
this.list.splice(index,1)
}
}
</script>
<body>