首頁 > web前端 > js教程 > 主體

怎樣實作vue父子組件間通信

php中世界最好的语言
發布: 2018-05-28 11:27:10
原創
1729 人瀏覽過

這次給大家帶來怎樣實現vue父子組件間通信,實現vue父子組件間通信的注意事項有哪些,下面就是實戰案例,一起來看一下。

元件是 vue.js 最強大的功能之一,而元件實例的作用域是相互獨立的,這意味著不同元件之間的資料無法相互引用。那麼組件間如何通信,也就成為了vue中重點知識了。這篇文章將會透過props、$ref和 $emit 這幾個知識點,來講解如何實作父子元件間通訊。

在說如何實現通訊之前,我們先來建立兩個元件father.vue和child.vue作為範例的基礎。

//父组件
<template>
 <p>
  <h1>我是父组件!</h1>
  <child></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>
登入後複製
//子组件
<template>
 <h3>我是子组件!</h3>
</template>
<script>
</script>
登入後複製

這兩部分的程式碼都很清晰明了,父元件透過import的方式導入子元件,並在components屬性中註冊,然後子元件就可以用標籤的形式嵌進父組件了。運行father.vue後的效果是這樣的:

範例效果一

1.透過prop實作通訊

子元件的props選項能夠接收來自父元件資料。沒錯,僅僅只能接收,props是單向綁定的,也就是只能父元件向子元件傳遞,不能反向。而傳遞的方式也分為兩種:

(1)靜態傳遞

子元件透過props選項來宣告一個自訂的屬性,然後父元件就可以在嵌套標籤的時候,透過這個屬性往子組件傳遞資料了。

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件!</h1>
  <child message="我是子组件一!"></child> //通过自定义属性传递数据
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>
登入後複製
 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']  //声明一个自定义的属性
 }
</script>
登入後複製

(2)動態傳遞

我們已經知道了可以像上面那樣給props 傳入一個靜態的值,但是我們更多的情況需要動態的數據。這時候就可以用 v-bind 來實現。透過v-bind綁定props的自訂的屬性,傳遞去過的就不是靜態的字串了,它可以是一個表達式、布林值、物件等等任何類型的值。

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件!</h1>
  <child message="我是子组件一!"></child>
  <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
  <child v-bind:message="a+b"></child>
  <!-- 用一个变量进行动态赋值。-->
  <child v-bind:message="msg"></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
 data() {
  return {
   a:'我是子组件二!',
   b:112233,
   msg: '我是子组件三!'+ Math.random()
  }
 }
}
</script>
登入後複製
 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']
 }
</script>
登入後複製

出來的效果是這樣的:

#範例效果二

2.透過$ref 實現通訊

對於ref官方的解釋是:ref 是用來為元素或子元件註冊引用資訊的。引用資訊將會註冊在父組件的 $refs 物件上。

看不懂對吧?很正常,我也看不懂。那該怎麼理解?看看我的解釋:

  1. 如果ref用在子元件上,指向的是元件實例,可以理解為子元件的索引,透過$ref可能取得到在子元件上裡定義的屬性和方法

  2. 如果ref在普通的DOM 元素上使用,引用指向的就是DOM 元素,透過$ref可能取得到該DOM 的屬性集合,輕鬆存取到DOM元素,作用與JQ選擇器類似。

那如何透過$ref 實作通訊?下面我將上面prop實現的功能,用$ref實作一遍:

<!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件!</h1>
  <child ref="msg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  mounted: function () {
   console.log( this.$refs.msg);
   this.$refs.msg.getMessage('我是子组件一!')
  }
 }
</script>
登入後複製
 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  data(){
   return{
    message:''
   }
  },
  methods:{
   getMessage(m){
    this.message=m;
   }
  }
 }
</script>
登入後複製

從上面的程式碼我們可以發現,透過ref='msg'可以將子元件child的實例指給$ref,並且透過.msg.getMessage()呼叫到子元件的getMessage方法,將參數傳遞給子元件。以下是「 console.log( this.$refs.msg);」印出來的內容,這可以讓大家更了解,究竟透過ref我們取得了什麼:

# #console.log

最後的效果是這樣的:

範例效果三

這裡再補充一點就是,prop和$ ref之間的差異:

  1. prop 著重於資料的傳遞,它並不能呼叫子元件裡的屬性和方法。像是建立文章元件時,自訂標題和內容這樣的使用場景,最適合使用prop。

  2. $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

3.通过$emit 实现通信

上面两种示例主要都是父组件向子组件通信,而通过$emit 实现子组件向父组件通信。

对于$emit官网上也是解释得很朦胧,我按我自己的理解是这样的:

vm.$emit( event, arg )
登入後複製

$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。

<template>
 <p>
  <h1>{{title}}</h1>
  <child @getMessage="showMsg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  data(){
   return{
    title:''
   }
  },
  methods:{
   showMsg(title){
    this.title=title;
   }
 }
 }
</script>
登入後複製
<template>
 <h3>我是子组件!</h3>
</template>
<script>
 export default {
  mounted: function () {
   this.$emit('getMessage', '我是父组件!')
  }
 }
</script>
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用nodejs express配置自签名https服务器

怎样用mpvue构建小程序

以上是怎樣實作vue父子組件間通信的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板