紧接着我们上一笔记,这里我们来讲一下简单的父子组件问题,不过这里是同级内的
我们来实现一个在输入框中输入内容,点击提交则将其展示在页面列表中,点击Item列表中的内容,则将其删除。前一部分是父组件向子组件通信,后一部分是子组件向父组件通信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>同级内父子组件之间通信</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button @click="handerClick">提交</button>
<!-- 2.这里我们使用v-bind简写为":"去接收父组件的值,也就是将item通过v-bind方法借助content变量去传给我们创建的子组件list-item,也可以叫绑定 -->
<list-item
:content="item"
:index="index"
v-for="(item,index) in list"
@delete="HanderDeleteItem"
>
</list-item>
</div>
<script>
// 声明一个局部组件
var ListItem = {
// 接收父组件传递的值
props: [
'content',
// 接收父组件通过index变量传递过来的值(这里是item的下标)
'index'
],
template: '<li @click="HanderItemDelete">{{content}}</li>',
methods:{
HanderItemDelete: function(){
// 这是个重点啊,这是子组件将东西传递给父组件的函数,$emit,通过detele变量去让父组件去监听,这里我们传递一个点击的item下标
this.$emit('delete',this.index)
}
}
}
var app = new Vue({
el: '#app',
// 注册局部组件,这里是components哦
components: {
ListItem: ListItem
},
data:{
list: [],
inputValue: ''
},
methods: {
handerClick:function(){
//将输入框内容添加到list数组中
app.$data.list.push(this.inputValue);
//每次添加结束以后我们就将输入框中的内容清空
this.inputValue='';
},
HanderDeleteItem:function(index){
// alert(index)
// 从数组中删除,使用splice函数
this.list.splice(index,1)
}
},
})
</script>
</body>
</html>
VUE.js可以引入本地的包,或者采用CDN的方式哦