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 除外)。

（编辑：西安站长网）

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