大家都知道，vue组件是数据驱动的一个前端框架。在开发中我们避免不了进行父子传值问题。下面举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-study</title>
<script src="vue.js"></script>
</head>
<body>
<div id="sm">
<input type="text" v-model="invalue"/>
<button v-on:click="btn">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li>-->
<my-item v-bind:content="item"
v-for="(item,index) in list"
v-bind:index="index"
@delete="deleteHandle"
></my-item>
</ul>
</div>
</body>
<script>
//声明局部组件
var myItem ={
props:['content','index'],
//加入点击事件
template:"<li @click='handleClick'>{{content}}</li>",
methods:{
handleClick:function(){
//当点击此事件时删除子列表
this.$emit('delete',this.index);
}
}
}
var vue = new Vue({
el: '#sm',
components:{
myItem:myItem
},
data: {
content:"你好啊",
list:[],
invalue:''
},
methods:{
btn:function(){
this.list.push(this.invalue);
this.invalue=''
},
deleteHandle : function(index){
//删除子标签
//this.list=[]
//点击某个下标就删除哪条数据
this.list.splice(index,1);
}
}
})；
简单说明：
页面在输入框填写数据，然后生成列表标签，我们点击提交进行列表行新增，点击子列表项删除该列表数据。这里有一个重点就是父组件传值子组件，子组件触发父组件事件问题。
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件。
关键点：如果父组件传值子组件，那么需要使用props进行接收，关键代码：
v-bind:content="item" v-bind:index="index" 在父组件中绑定的数据，那么声明我们子组件时需要props:['content','index'],进行接收。
如果点击列表时触发父组件事件，首先在生成标签中绑定事件： template:"<li @click='handleClick'>{{content}}</li>", 然后编写该事件：
handleClick:function(){
//当点击此事件时删除子列表
this.$emit('delete',this.index);
}
通过$emit来触发父组件事件，父组件绑定事件 @delete="deleteHandle 编写该事件：
deleteHandle : function(index){
//删除子标签
//this.list=[]
//点击某个下标就删除哪条数据
this.list.splice(index,1);
}
是不是很明白了。。。。。。。。。。。。。。。。。。。。。。
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
