vuejs如何设置父子通信

vuejs设置父子通信的方法：1、父组件利用props向子组件传递数据；2、子组件通过“$emit”给父组件发送消息；3、利用“.sync”语法糖；4、利用“$attrs”和“$listeners”；5、利用privide和inject。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

Vue 父子组件之间的通信有一下几种方式：

• props

• $emit -- 组件封装用的比较多

•  .sync -- 语法糖

• $attrs 和 $listeners -- 组件封装用的比较多

• privide 和 inject -- 高阶组件

下面将分别介绍

1、 props

这个在日常开发中运用较多，简单来说，我们可以通过props向子组件传递数据，就像一个水管一样，父组件的数据从上往下流向子组件，不能逆流。这也是vue的设计概论之单项数据流。

<div id="app">
  <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
  template: &#39;<h2>{{ content }}</h2>&#39;,
  props: {
    content: {
      type: String,
      default: () => { return &#39;from child&#39; }
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;from parent&#39;
  },
  components: {
    Child
  }
})

2、$emit

官方介绍是触发当前实例上得事件，附加参数都会传给监听器回调。

<div id="app">
  <my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
  template: &#39;<button @click="triggerClick">click</button>&#39;,
  data () {
    return {
      greeting: &#39;vue.js!&#39;
    }
  },
  methods: {
    triggerClick () {
      this.$emit(&#39;greet&#39;, this.greeting)
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  components: {
    MyButton
  },
  methods: {
    sayHi (val) {
      alert(&#39;Hi, &#39; + val) // &#39;Hi, vue.js!&#39;
    }
  }
})

3、.sync 修饰符

在vue1.x的时候，曾作为双向绑定功能存在，即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念，所以在vue2.x中被去掉了，但是在vue 2.3.0+以上的版本中又从新引入了这个 .sync 修饰符。但是只作为一个编译时的语法糖存在。它被扩展为一个自动更新父组件属性的 v-on 监听器。

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

语法糖的写法形式如下

3aad4a5f8d6d21b85f13f5b7d90449ce
d093019edc1fd049b9381d54424ed8e7

于是我们可以用.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: [&#39;name&#39;],
  data () {
    return {
      text: &#39;&#39;
    }
  },
  watch: {
    text (newVal) {
      this.$emit(&#39;update:name&#39;, newVal)
    }
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    userName: &#39;&#39;
  },
  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>

let Child = Vue.extend({
  template: &#39;<h2>{{ foo }}</h2>&#39;,
  props: [&#39;foo&#39;],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 这里我们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> &#39;two&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    foo: &#39;parent foo&#39;,
    bar: &#39;parent bar&#39;
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert(&#39;one&#39;)
    },
    triggerTwo () {
      alert(&#39;two&#39;)
    }
  }
})

可以看到，我们可以通过 $attrs 和 $listeners 进行数据传递，在需要的地方进行调用和处理，还是很方便的。当然，我们还可以通过 v-on="$listeners" 一级级的往下传递，子子孙孙无穷尽也！

5、privide 和 inject

来看下官方对 provide / inject 的描述：

　　provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

ab509c080ec9f7ec77efedb1cdcd4bed

  1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d

16b28748ea4df4d9c2150843fecfba68

let Son = Vue.extend({
  template: 'c1a436a314ed609750bd7c7d319db4dason2e9b454fa8428549ca2e64dfac4625cd',
  inject: {
    house: {
      default: '没房'
    },
    car: {
      default: '没车'
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费，需要向父母要
      default: '￥4500'
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> '房子', '车子', '￥10000'
  }
})

new Vue({
  el: '#app',
  provide: {
    house: '房子',
    car: '车子',
    money: '￥10000'
  },
  components: {
    Son
  }
})

更多列子可以参考element-ui源码，其中的大量使用了该方法

相关推荐：《vue.js教程》

以上是vuejs如何设置父子通信的详细内容。更多信息请关注PHP中文网其他相关文章！