vue——自定义事件

﹏ヽ暗。殇╰゛Y 2021-09-14 12:54 381阅读 0赞

每个 Vue 实例都实现了[事件接口][Link 1]，即：

*  使用 `$on(eventName)` 监听事件
 *  使用 `$emit(eventName)` 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

\[注意\]不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定

请看下面的例子：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 自定义事件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <div id="counter-event-example">
          <p>{
        { total }}</p>
          <button-counter v-on:increment="incrementTotal"></button-counter>
          <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>
     
    <script>
    Vue.component('button-counter', {
      template: '<button v-on:click="incrementHandler">{
        { counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        incrementHandler: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>
    </body>
    </html>

![20171227142204314][]  
子组件使用了一个事件，比如click然后产生了一个效果，这样的效果便可以为自定义事件了。然后将这样的效果命名放入父组件中，当做一个事件来触发，每当这样的效果发生一次时，这样父组件的事件也被触发了，即可以产生另一种效果，这样可以加强这两个效果的紧密联系，并且这样有趣又好用的方式也可以用在自己想要的地方。

自定义事件的命名约定与组件注册及props的命名约定都不相同，由于自定义事件实质上也是属于HTML的属性，所以其在HTML模板中，最好使用中划线形式

### 数据传递 ###

子组件通过$emit可以触发父组件事件，第一个参数为要触发的事件，第二个事件为要传递的数据

this.$emit('pass-data',this.childMsg)

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 自定义事件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    
    <div id="example">
     <parent></parent>
    </div>
    
    
    <script>
    	//定义局部子组件
    var childNode = {
     template: `
     <div class="child">
      <div>
       <span>子组件数据</span>
       <input v-model="childMsg" v-on:input="data">
      </div>
      <p>{
         {childMsg}}</p>
     </div>
     `,
     data(){
      return{
       childMsg:'你猜'
      }
     },
     methods:{
      data(){
    	  //将数据传递给父组件
       this.$emit('pass-data',this.childMsg)
      }
     }
    }
    	//定义局部父组件
    var parentNode = {
     template: `
     <div class="parent">
      <div>
       <span>父组件数据</span>
       <input v-model="msg">
      </div>
      <p>{
         {msg}}</p>
      <child @pass-data="getData"></child>
     </div>
     `,
     components: {
      'child': childNode
     },
     data(){
      return {
       'msg':'match'
      }
     },
     methods:{
      getData(value){
       this.msg = value;
      }
     }
    };
    // 创建根实例
    new Vue({
     el: '#example',
     components: {
      'parent': parentNode
     }
    })
    </script>
    </body>
    </html>

![20171227145136517][]  
子组件通过数据绑定将自身的信息传递给父组件，从而改变父组件内容。

### [`.sync` 修饰符][.sync] ###

从 2.3.0 起我们重新引入了  `.sync`  修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的  `v-on`  监听器。

会扩展为：

当子组件需要更新  `foo`  的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 自定义事件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    
    <div id="example">
     <parent></parent>
    </div>
    
    
    <script src="https://unpkg.com/vue"></script>
    <script>
    var childNode = {
     template: `
     <div class="child">
      <div>子组件数据：{
         {childMsg}}</div>
      <input v-model="childMsg">
      <button @click=add >+1</button>
     </div>
     `,
     data(){
      return{
       childMsg: 0
      }
     },
     methods:{
      add(){
       this.childMsg++;
       this.$emit('update:foo',this.childMsg);
      }
     }
    };
    var parentNode = {
     template: `
     <div class="parent">
      <p>父组件数据：{
         {msg}}</p>
      <child :foo.sync="msg"></child>
     </div>
     `,
     components: {
      'child': childNode
     },
     data(){
      return {
       'msg':0
      }
     }
    };
    // 创建根实例
    new Vue({
     el: '#example',
     components: {
      'parent': parentNode
     }
    })
    </script>
    </body>
    </html>

![20171227154656821][]

[Link 1]: https://cn.vuejs.org/v2/api/#实例方法-事件
[20171227142204314]: /images/20210813/19b7e0a43a064776b035c7c31c56b77c.png
[20171227145136517]: /images/20210813/67f73aa5e24d4a5a8f1513364a68f768.png
[.sync]: https://cn.vuejs.org/v2/guide/components.html#sync-修饰符
[20171227154656821]: /images/20210813/8218826ef5964664a93d4bccf1b198da.png