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" 一级级的往下转达，子子孙孙无限尽也!

一个插曲!

（编辑：湖南网）

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