父子组件通信—父传子
在我的上一篇文章中提到了父子组件通信中的父传子,如何您还不了解,建议参考:自学Vue必看的父子组件通信(一),回归正题!!!
父子组件通信—子传父
子传父是当子组需要向父组件传递数据时,就要用到自定义事件。
步骤:
(1)在子组件中,通过 $emit() 来触发某一事件A
(2)在父组件中通过v-on监听事件A,完成父组件的功能,实现子传父
举例展示
注意事项:
(1)通过 $emit() 来触发某一事件A可以传参数,也可以不传参数。
(2)v-on在这里监听使用时不支持驼峰命名法,只有在脚手架中可以用驼峰命名法
(3)v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件
(4)子传父在父模板中方法省略参数,在其他情况中默认传入事件对象。而这里是默认传入该参数,不是传入事件对象
HTML
//<!-- 父组件模板 -->
<div id="app">
//<!-- 这里不支持驼峰命名法,只有在脚手架中可以用驼峰命名法 -->
<cpn @btn-click1="responseClick1"></cpn>
//<!-- 省略参数,在其他情况中默认传入事件对象。而这里是默认传入该参数,不是传入事件对象-->
<cpn @btn-click2="responseClick2"></cpn>
</div>
//<!-- 子组件模板 -->
<template id="cpn">
<div>
<button v-for="book in books" @click="btn(book)">{{book.name}}</button>
</div>
</template>
JavaScript
<script src="../vue.js"></script>
<script>
//子组件
const cpn = {
template:"#cpn",
data() {
return {
books:[
{id:1, name:"红楼梦"},
{id:2, name:"水浒传"},
{id:3, name:"三国演义"},
{id:4, name:"西游记"}
]
}
},
methods:{
btn(book) {
//发送事件(无参数)
this.$emit("btn-click");
//发送事件(有参数)
this.$emit("btn-click2",book);
}
}
}
//Vue实例
const app = new Vue({
el:'#app',
data:{
message:"hello vue"
},
components:{
cpn
},
methods:{
responseClick1() {
console.log("我是没有参数的");
},
responseClick2(book) {
console.log(book);
}
}
})
</script>