首頁  >  文章  >  web前端  >  vue的傳值方式有哪些? vue中常用的傳值方式介紹(3種)

vue的傳值方式有哪些? vue中常用的傳值方式介紹(3種)

不言
不言原創
2018-08-23 16:46:173781瀏覽

這篇文章帶給大家的內容是關於vue的傳值方式有哪些? vue中常用的傳值方式介紹(3種),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一. 父元件傳送值給子元件
1. 使用props建立資料通道的管道

       // 这是父组件 
      <div id="app">
          // 这是子组件 
          <child message="hello" ></child>
      </div>

2 . 在子元件中透過props傳遞過來的資料

 Vue,component(&#39;child&#39;,{
     props:[&#39;message&#39;]
 })

二.子元件向父元件傳值
1.子元件中需要一個點擊事件觸發一個自訂事件

Vue.component(&#39;child&#39;,{
    methods:{
        handleClick(){
        // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
            this.$emit(&#39;parentClick&#39;,123)
        }
    },
    template:`        <div>
            <h1>这是子组件</h1>
            <button @click="handleClick" >
                发送给父组件            </button>
        </div>
    `
})

2.在父元件中的子標籤監聽該自訂事件傳遞的值

Vue.component(&#39;parent&#39;, {
    data() {
        return {
            msg: &#39;我是子组件&#39;
        }
    },
    methods: {
        receiveMsg(value) {
            console.log(value)
            this.msg = value
        }
    },
    template:&#39;        <div>
            <h1>这是子组件</h1>
            <p>接收子组件传过来的值{{msg}}</p>
            <child @parentClick=&#39;receiveMsg&#39;></child>
        </div>
    &#39;
})

三. 非父子元件傳值
有時候兩個元件也需要傳值(非父子關係),所以我們需要一個公共的vue來進行傳遞值和取得值 
1 .創建一個空的vue

  // 创建一个空的公共的vue对象
    var bus = new Vue();

2 . 在元件1中,定義$emit來傳送資料

bus.$emit(&#39;test&#39;,&#39;数据&#39;)

3 . 在元件2中使用$on來接收傳遞的資料

bus.$on(&#39;test&#39;, function(num) {
     this.msg= num;       //事件的解绑问题 
        bus.$off("test")
 })

當然非父子傳值的方法不只有一種我們也可以使用localstorage 來傳值和取值

// 在第一个组件中 setItem 设置值local
storage.setItem(&#39;test&#39;,&#39;数据&#39;)
// 在第二个组件中 getItem 获取值local
Storage.getItem("test");

相關推薦:

##vue元件之間的傳值方式

vue如何取得目前點擊的元素並傳值

以上是vue的傳值方式有哪些? vue中常用的傳值方式介紹(3種)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn