Vue.js 父子组件通信的十种方式

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

• 官网对 $listeners 的解释如下：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

我觉得 $attrs 和 $listeners 属性像两个收纳箱，一个负责收纳属性，一个负责收纳事件，都是以对象的形式来保存数据。

看下面的代码解释：

<div id="app">  <child    :foo="foo"    :bar="bar"    @one.native="triggerOne"    @two="triggerTwo">  </child></div> 

从 Html 中可以看到，这里有俩属性和俩方法，区别是属性一个是 prop 声明，事件一个是 .native 修饰器。

let Child = Vue.extend({ 
  template: '<h2>{{ foo }}</h2>', 
  props: ['foo'], 
  created () { 
    console.log(this.$attrs, this.$listeners) 
    // -> {bar: "parent bar"} 
    // -> {two: fn} 
 
 
    // 这里我们访问父组件中的 `triggerTwo` 方法 
    this.$listeners.two() 
    // -> 'two' 
  } 
}) 
 
new Vue({ 
  el: '#app', 
  data: { 
    foo: 'parent foo', 
    bar: 'parent bar' 
  }, 
  components: { 
    Child 
  }, 
  methods: { 
      triggerOne () { 
      alert('one') 
    }, 
    triggerTwo () { 
      alert('two') 
    } 
  } 
}) 

可以看到，我们可以通过 $attrs 和 $listeners 进行数据传递，在需要的地方进行调用和处理，还是很方便的。

当然，我们还可以通过 v-on="$listeners" 一级级的往下传递，子子孙孙无穷尽也!

一个插曲!

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!