详解vue.js2.0父组件点击触发子组件方法

2024-05-06 15:17:23

字体：大中小

来源：转载

供稿：网友

之前关于vue.js2.0父组件的一点学习，最近需要回顾，就顺便发到随笔上了

<body>   <div id="counter-event-example">    <p>{{ total }}</p>    <button-counter v-on:ee="incrementTotal"></button-counter>    <button-counter v-on:ee="incrementTotal"></button-counter>   </div>    <script>     Vue.component('button-counter', {      template: '<button v-on:click="increment">{{ counter }}</button>',      data: function () {       return {        counter: 0       }      },      methods: {       increment: function () {        this.counter += 1        this.$emit('ee', 'cc' )       }      },     })     new Vue({      el: '#counter-event-example',      data: {       total: 'arg'      },      methods: {       incrementTotal: function (b) {        this.total = b + '1';       }      }     })   </script> </body>

子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。

另外，写一个小拾遗。vue子组件用了定义模板组件功能，然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。

再说一个非常方便的v-ref

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Document</title>   <script src="vue.js"></script> </head> <body> <div id="parent">    <input type="text" name="" id="" v-model="msg" />   <input type="button" id="" value="dianji" @click="clickDt" />   <user-profile ref="profile"></user-profile>  </div>    <script>    Vue.component('user-profile', {      template: '<span>{{ msg }}</span>',      data: function () {        return {         msg: 123       };     },      methods: {        greet: function (msg) {          console.log(msg);        }      }      })  //   var parent = new Vue({el: '#parent'});  //   var child = parent.$refs.profile;  //   child.greet();    new Vue({     el:"#parent",     data:{       msg:""     },     methods: {         clickDt(){         this.$refs.profile.greet(this.msg);       }     }   }) </script>  </body> </html>

Vue2.0组件间数据传递

Vue1.0组件间传递

使用$on()监听事件；使用$emit()在它上面触发事件；使用$dispatch()派发事件，事件沿着父链冒泡；使用$broadcast()广播事件，事件向下传导给所有的后代

Vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

1，父组件向子组件传递场景：Father上一个输入框，根据输入传递到Child组件上。

上一篇：全面解析vue中的数据双向绑定

下一篇：利用forever和pm2部署node.js项目过程