Web前端教程 Vue 组件间传值 组件间传值,父子组(2)

子组件往父组件传值
1、现在子组件中进行监听注册@click='handleItemClick'
2、在子组件中的methods中注册 handleItemClick
3、this.$emit("delete"); 子组件被点击时，向外触发一个delete事件，
4、同时需要在父组件中进行对该事件进行监听@delete="handleItemClick"
5、在父组件的methods中注册handleItemClick方法
*/
methods:{
handleItemClick:function () {
this.$emit("delete"，this.index);
}
}
}

/*
// Vue提供的创建全局组件
Vue.component("todo-item"，{
props:['todo']，
template:"<li>{{todo}}</li>"
});
*/


var app = new Vue({
el:'#app'，
components:{
TodoItem:TodoItem
}，
data:{
// list:['Hello'，'World']，
list:['Hello'，'World！']，
inputValue:'v-model'
}，
methods: {
handleBtnClick:function () {
this.list.push(this.inputValue);
}，
handleItemClick:function (index) {
this.list.splice(index，1);
}
}

});
</script>
</body>
</html>

<上一页12