多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# 子向父传递数据 ## 案例 >[success] 案例描述:单击按钮,操作父组件中的p元素显示或隐藏。 ## 方式 1. 父组件通过v-on:自定义类型=”函数“ 2. 子组件通过this.$emit(自定义事件名称) ## 步骤 1.在父组件上指定**自定义事件并且指定函数名称**。注意绑定事件对应的**函数名称不可以加括号** :-: ![](https://img.kancloud.cn/97/f0/97f02444a2ab5b1c17b71d45bb00ea53_601x121.png) 2.指定的函数名称书写在对应的组件环境的methods下。并且定义该功能时,一般都要传参。 :-: ![](https://img.kancloud.cn/84/cb/84cb60b35e29b339a1c527fe785b7d51_474x286.png) 3.在子组件中正常绑定事件。并且在当前组件环境的methods下定义该功能change。 :-: ![](https://img.kancloud.cn/2e/d1/2ed1ca19518b15f35d47ef502aaf3c17_781x267.png) 4.对应的功能如何才能将父组件中的自定义事件对应的函数功能触发,通过**this.$emit('自定义事件名称',参数)** :-: ![](https://img.kancloud.cn/bd/72/bd7230f54e2aa518abcd9b607c601b0b_678x188.png) :-: ![](https://img.kancloud.cn/75/3e/753e7e538fd43bd18427033aa200ac3a_1549x792.png) ## 代码 ``` <div id="app"> <ym-btn @parqie="parChange" :show="show"></ym-btn> <p v-show="show"></p> </div> <script src="js/vue.js"></script> <script> Vue.component('ym-btn',{ props:['show'], template:`<button @click="change">按钮{{show}}</button>`, methods:{ change(){ this.$emit('parqie',!this.show); } } }); var vm = new Vue({ el:'#app', data:{ show:true }, methods:{ parChange(value){ this.show = value; } } }) </script> ``` ## 总结 1. 父组件通过v-on:自定义类型=”函数“ 2. 子组件通过this.$emit(自定义事件名称)