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

如何在vue.js元件之間進行資料傳遞

巴扎黑
發布: 2017-07-23 15:23:17
原創
1730 人瀏覽過

前言

元件是 vue.js 最強大的功能之一,而元件實例的作用域是相互獨立的,這意味著不同元件之間的資料無法相互引用。如何傳遞資料也成了元件的重要知識點之一。

元件

元件與元件之間,也存在著不同的關係。父子關係與兄弟關係(不是父子的都暫稱為兄弟吧)。

原文作者:林鑫,作者部落格:

父子元件

父子關係就是元件A 在它的範本中使用了元件B,那麼元件A 就是父組件,組件B 就是子組件。

// 注册一个子组件Vue.component(&#39;child&#39;, {data: function(){text: &#39;我是father的子组件!&#39;}template: &#39;<span>{{ text }}</span>&#39;})// 注册一个父组件Vue.component(&#39;father&#39;, {template: &#39;<div><child></child></div>&#39;  // 在模板中使用了child组件})
登入後複製

直接使用 father 元件的時候:

<div id="app"><father></father></div>
登入後複製

頁面中就會渲染出 :我是father的子元件!

father 元件在範本中使用了 child 元件,所以它就是父元件,child 元件被使用,所以 child 元件就是子元件。

兄弟元件

兩個元件互不引用,則為兄弟元件。

Vue.component(&#39;brother1&#39;, {template: &#39;<div>我是大哥</div>&#39;})Vue.component(&#39;brother2&#39;, {template: &#39;<div>我是小弟</div>&#39;})
登入後複製

使用元件的時候:

<div id="app"><brother1></brother1><brother2></brother2></div>
登入後複製

頁面中就會渲染出:

我是大哥

我是小弟

Prop

子元件想要使用父元件的數據,我們需要透過子元件的props 選項來取得父元件傳過來的資料。以下我使用在 .vue 檔案中的格式來寫範例。

如何傳遞資料

在父元件 father.vue 中引用子元件 child.vue,把 name 的值傳給 child 元件。

<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from &#39;./child.vue&#39;;export default {components: {child},data() {return {name: &#39;linxin&#39;}}}</script>
登入後複製

在子元件child.vue 中的props 選項中宣告它期待獲得的資料

<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: [&#39;message&#39;]}</script>
登入後複製

那麼頁面中就會渲染出:Hello linxin

單向資料流

當父元件的name 改變,子元件也會自動更新檢視。但是在子元件中,我們不要去修改 prop。如果你必須要修改到這些數據,你可以使用以下方法:

方法一:把prop 賦值給一個局部變量,然後需要修改的話就修改這個局部變量,而不影響prop

export default {data(){newMessage: null  },props: [&#39;message&#39;],created(){this.newMessage = this.message;}}
登入後複製

方法二:在計算屬性中對prop 進行處理

export default {props: [&#39;message&#39;],computed{newMessage(){return this.newMessage + &#39; 哈哈哈&#39;;}}}
登入後複製

自訂事件

prop 是單向綁定的:當父元件的屬性發生變化時,將傳導給子元件,但是不會反過來。修改子元件的 prop 值,是不會傳回給父元件去更新視圖的。那麼子元件要如何去與父元件通訊呢?

那就是自訂事件。透過在父元件 $on(eventName) 監聽自訂事件,當子元件裡 $emit(eventName) 觸發該自訂事件的時候,父元件執行對應的操作。

例如在父元件中控制一個彈框子元件的顯示,在子元件中按下關閉之後,告訴父元件去隱藏它,然後父元件就執行操作隱藏彈框。

<template><div class="app">// hide 为自定义事件,名字可以自己随便起,不能有大写字母,可以使用短横线
        // @hide 监听子组件触发 hide 事件,则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from &#39;./dialog.vue&#39;;export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>
登入後複製

在子元件 dialog.vue 中:

<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: [&#39;isShow&#39;],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit(&#39;hide&#39;);}}}</script>
登入後複製

這樣就實作了父子元件之間的相互通訊。

Vuex

上面的範例都是建立在父子關係的元件上,但是對於其他層級的關係,實作起來就比較繁瑣了。那麼這時候 Vuex 就能更好的幫你在各個組件間即時通訊了。關於Vuex,可查看我的另一篇文章:Vuex 模組化實作待辦事項的狀態管理

總結

元件通訊並不是一定要使用必須使用Vuex,對於一些簡單的資料傳遞,prop 也可以完成。本文主要是對元件傳參的一些基礎知識點的記錄,實戰可以參考 notepad 這個例子,使用 prop 實作子元件的顯示與隱藏,使用 vuex 來實現元件間的資料狀態管理。

以上是如何在vue.js元件之間進行資料傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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