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

既然作为一个语法糖，肯定是某种写法的简写形式，哪种写法呢，看代码：

<text-document  v-bind:title="doc.title"  v-on:update:title="doc.title = $event"></text-document> 

于是我们可以用 .sync 语法糖简写成如下形式：

<text-document v-bind:title.sync="doc.title"></text-document> 

废话这么多，如何做到“双向绑定” 呢?

让我们进段广告，广告之后更加精彩!

... 好的，欢迎回来。

假如我们想实现这样一个效果：改变子组件文本框中的值同时改变父组件中的值。

怎么做?列位不妨先想想。先看段代码：

<div id="app">  <login :name.sync="userName"></login> {{ userName }}</div> 
let Login = Vue.extend({ 
  template: ` 
    <div class="input-group"> 
      <label>姓名:</label> 
      <input v-model="text"> 
    </div> 
  `, 
  props: ['name'], 
  data () { 
    return { 
      text: '' 
    } 
  }, 
  watch: { 
    text (newVal) { 
      this.$emit('update:name', newVal) 
    } 
  } 
}) 
 
new Vue({ 
  el: '#app', 
  data: { 
    userName: '' 
  }, 
  components: { 
    Login 
  } 
}) 

下面划重点，代码里有这一句话：

this.$emit('update:name', newVal) 

官方语法是：update:myPropName 其中 myPropName 表示要更新的 prop 值。

当然如果你不用 .sync 语法糖使用上面的 .$emit 也能达到同样的效果。仅此而已!

4. $attrs 和 $listeners

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

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

当一个组件没有声明任何 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" 一级级的往下传递，子子孙孙无穷尽也!

一个插曲!

（编辑：南平站长网）

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