這篇文章主要介紹了vuejs怎么設(shè)置父子通信，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家從事企業(yè)網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)制作的專業(yè)網(wǎng)站建設(shè)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁(yè)設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹(shù)立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來(lái)曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)近1000家。

vuejs設(shè)置父子通信的方法：1、父組件利用props向子組件傳遞數(shù)據(jù)；2、子組件通過(guò)“$emit”給父組件發(fā)送消息；3、利用“.sync”語(yǔ)法糖；4、利用“$attrs”和“$listeners”；5、利用privide和inject。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vue 父子組件之間的通信有一下幾種方式：

• props

• $emit -- 組件封裝用的比較多

• .sync -- 語(yǔ)法糖

• $attrs 和 $listeners -- 組件封裝用的比較多

• privide 和 inject -- 高階組件

下面將分別介紹

1、 props

這個(gè)在日常開(kāi)發(fā)中運(yùn)用較多，簡(jiǎn)單來(lái)說(shuō)，我們可以通過(guò)props向子組件傳遞數(shù)據(jù)，就像一個(gè)水管一樣，父組件的數(shù)據(jù)從上往下流向子組件，不能逆流。這也是vue的設(shè)計(jì)概論之單項(xiàng)數(shù)據(jù)流。

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

2、$emit

官方介紹是觸發(fā)當(dāng)前實(shí)例上得事件，附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

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

3、.sync 修飾符

在vue1.x的時(shí)候，曾作為雙向綁定功能存在，即子組件可以修改父組件中的值。因?yàn)樗`反了單向數(shù)據(jù)流的設(shè)計(jì)理念，所以在vue2.x中被去掉了，但是在vue 2.3.0+以上的版本中又從新引入了這個(gè) .sync 修飾符。但是只作為一個(gè)編譯時(shí)的語(yǔ)法糖存在。它被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 監(jiān)聽(tīng)器。

在有些情況下，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒(méi)有明顯的改動(dòng)來(lái)源。

語(yǔ)法糖的寫法形式如下

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

于是我們可以用.sync 語(yǔ)法糖簡(jiǎn)寫成如下形式

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

那么如何做到雙向綁定呢，例如改變子組件文本框中的值同時(shí)改變父組件中的值，代碼如下

<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)

官方語(yǔ)法是：update:myPropName 其中 myPropName 表示要更新的 prop 值。當(dāng)然如果你不用 .sync 語(yǔ)法糖使用上面的 .$emit 也能達(dá)到同樣的效果

4、 $attrs 和 $listeners

官網(wǎng)對(duì) $attrs 的解釋如下：

包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。

官網(wǎng)對(duì) $listeners 的解釋如下:

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

$attrs 和 $listeners 屬性像兩個(gè)收納箱，一個(gè)負(fù)責(zé)收納屬性，一個(gè)負(fù)責(zé)收納事件，都是以對(duì)象的形式來(lái)保存數(shù)據(jù)

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

let Child = Vue.extend({
  template: '<h3>{{ foo }}</h3>',
  props: ['foo'],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 這里我們?cè)L問(wèn)父組件中的 `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')
    }
  }
})

可以看到，我們可以通過(guò) $attrs 和 $listeners 進(jìn)行數(shù)據(jù)傳遞，在需要的地方進(jìn)行調(diào)用和處理，還是很方便的。當(dāng)然，我們還可以通過(guò) v-on="$listeners" 一級(jí)級(jí)的往下傳遞，子子孫孫無(wú)窮盡也！

5、privide 和 inject

來(lái)看下官方對(duì) provide / inject 的描述：

provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中。并且這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

<div id="app">

  <son></son>

</div>

let Son = Vue.extend({
  template: '<h3>son</h3>',
  inject: {
    house: {
      default: '沒(méi)房'
    },
    car: {
      default: '沒(méi)車'
    },
    money: {
      // 長(zhǎng)大工作了雖然有點(diǎn)錢
      // 僅供生活費(fèi)，需要向父母要
      default: '￥4500'
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> '房子', '車子', '￥10000'
  }
})

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vuejs怎么設(shè)置父子通信”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前名稱：vuejs怎么設(shè)置父子通信
文章網(wǎng)址：http://chinadenli.net/article44/giesee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站排名、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)