(一) Vue组件之间的通信(入门)
2018-06-30 本文已影响15人
人生苦短啊
实现一个TodoList的功能
输入文字点击提交会在下面显示,单击下面任意一个数据会删掉对应的数据
可以拿来直接用
<body>
<div id="app">
<m-item></m-item>
<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="handleItemDelete">
</todo-item>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//全局组件
Vue.component('m-item', {
template: '<div>全局组件</div>'
})
// 子组件
var TodoItem = {
props: ['content', 'index'],
template: "<li @click='handleDelete'> {{content}} </li>",
methods:{
handleDelete:function(){
this.$emit("delete", this.index) //子组件绑定事件,父组件响应
}
}
}
// 父组件
var app = new Vue({
el: '#app',
components:{
TodoItem: TodoItem //绑定子组件
},
data: {
list: [],
todoValue: ""
},
methods:{
handleBtnClick: function(){
this.list.push(this.todoValue) //放入数组
this.todoValue = ""
},
handleItemDelete: function(index){
this.list.splice(index, 1) //删除对应indexx
}
}
})
</script>
标签解释:
@click : 可以绑定点击事件
v-bind : 绑定数据,用于和js交互
v-for : for循环语句 item 是每次循环的对象, index是循环的索引
props : 用于接收父组件传来的内容
v-model : 实现表单输入和应用状态之间的双向绑定
