子组件传值改变父组件的值
自定义事件
1首先在父组件中定义一条数据
2 this.$emit("父级的自定义事件")
3 父组件中的 子组件接收自定义事件,绑定到父级的事件
4提醒一下, 父组键的数据要写在,父组件里,子组建的数据方法要写在子组件里
5 这是一个下拉框组件
Vue.component("costom-list", {
methods:{
selectValueHandle(item){ //子组件中定义事件
this.$emit("receive",item);
}
},
props:["list"], //子组件接收数据
template:`<ul class="list">
<li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
</ul>`
})
var vm = new Vue({
el: "#app",
data: {
list1:["杭州","荆州","鲁中"],
list2:["2017-02-13","2017-76-23","2017-12-14"]
},
methods: {
},
computed: {
},
directives: {
},
components: {
"costom-select": {
data() {
return {
selectShow: false,
val:""// 父组件数据
}
},
methods:{
changeValue(value){ //被子组件触发的父组件事件
this.val=value; // 值被改变
this.selectShow=false;
}
},
props: ["btnValue","list"],
template:
<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord"
@click="selectShow=!selectShow"
:value="val"
/>
<input type="button" :value="btnValue">
<span></span>
</div>
<costom-list
v-show="selectShow"
:list="list"
@receive="changeValue" //接收 子组件的自定义事件
></costom-list>
</div>`
}
}
})