上一篇章讲解了使用props
将父组件的值传递到子组件中,那么子组件如果反过来传递给父组件呢?
这就需要父组件传递事件方法,提供子组件调用,通过子组件调用父组件的函数,传入相关参数,来进行逆向传递。
而子组件如果想要调用父组件的函数,则需要使用emit
方法。
官网介绍地址:https://cn.vuejs.org/v2/api/#vm-emit
getMsg
是父组件中methods
中定义的方法名称,func
是子组件调用传递过来方法时候的方法名称。<son @func="getMsg"></son>
<div id="app">
<!-- 引用父组件 -->
<son @func="getMsg"></son>
<!-- 组件模板定义 -->
<script type="x-template" id="son">
<div>
<input type="button" value="向父组件传值" @click="sendMsg" />
</div>
</script>
</div>
<script>
// 子组件的定义方式
Vue.component('son', {
template: '#son', // 组件模板Id
methods: {
sendMsg() { // 按钮的点击事件
this.$emit('func', 'OK'); // 调用父组件传递过来的方法,同时把数据传递出去
}
}
});
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // 子组件中,通过 this.$emit() 实际调用的方法,在此进行定义
alert(val);
}
}
});
</script>
下面逐步写一个子组件通过事件调用向父组件传值的示例。
需要以下步骤:
show
,使用v-on
绑定到子组件中emit
调用绑定下来的父组件方法,测试能否调用emit
传递参数到父组件中基本上步骤大致是这样,下面来逐步写写看。
浏览器显示如下:
show
,使用v-on
绑定到子组件中emit
调用绑定下来的父组件方法,测试能否调用emit
传递参数到父组件中好了,现在在浏览器点击来看看打印的信息,如下:
那么从上面,我们看到了子组件的参数已经传递父组件中,那么可以思考一下,父组件接收到了参数之后,是否还可以传递到父组件的data
参数么?
在浏览器执行如下:
好了,到这里基本已经实现了子组件往父组件传值的整体过程了。