vue組件傳值的方式有哪些

這篇文章主要介紹vue組件傳值的方式有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

組件傳值方式：1、通過路由進(jìn)行傳值；2、通過在父組件中讓子組件標(biāo)簽綁定父組件的數(shù)據(jù)，子組件的props接收父組件穿過來的值，子組件的props接收父組件傳的值；3、子組件向父組件傳值，用“this.$emit”來遍歷getData事件。

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

1、路由傳參

步驟：

①定義路由時加上參數(shù)props: true，在定義路由路徑時要留有參數(shù)占位符: name『用法:to="'路徑/'＋value"』

②在跳轉(zhuǎn)到的頁面加上參數(shù)props:['name']

③在跳轉(zhuǎn)到的頁面就獲取到了name『用法: js中直接this. name；html中直接插值{{ name}}』

2、父組件向子組件傳值

父組件向子組件傳值就是通過在父組件中讓子組件標(biāo)簽綁定父組件的數(shù)據(jù)，子組件的props接收父組件穿過來的值即可

步驟：

①父組件內(nèi)設(shè)置要傳的數(shù)據(jù)『data(){ parentid: value}』

②在父組件中引用的子組件上綁定一個自定義屬性并把數(shù)據(jù)綁定在自定義屬性上『< myBtn :childid='parentid'></ mybtn>』

③在子組件添加參數(shù)props:['childid'],即可

代碼：

<div id="app">
	<mybtn :childid='parentid' title="我是標(biāo)題"></mybtn>
</div>
<script>
	new Vue({
		el:"app",
		data:{
			parentid:"88888"
		},
		components:{
			"mybtn" : {
				props: ['childid','title'],
	  			template: '<button>我是{{childid}}號按鈕{{title}}</button>'
			}
		}
	})
</script>

結(jié)果展示：

3、子組件向父組件傳值

子傳父的實現(xiàn)方式就是用了 this.e m i t 來遍歷 getData 事件，首先用按鈕來觸發(fā)setData事件，在setData中用this.emit 來遍歷 getData 事件，最后返回 this.msg

步驟：

①由于父組件需要參數(shù)，所以在父組件中的標(biāo)簽上定義自定義事件，在事件內(nèi)部獲取參數(shù)；『@myEvent=" callback"在callback函數(shù)中接收參數(shù)』

②在子組件中觸發(fā)自定義事件，并傳參。『this.$emit('父組件中的自定義事件',參數(shù))』

代碼：

<template>
  <div>
	  <mybtn :style="{color:acolor,background:bcolor}" @changeColorEvent="getColor" :parentid="childid" title="我是標(biāo)題"></mybtn>
  </div>

</template>
<script>

  export default {
    name : 'test',
    data () {
      return {
        childid:"666",
        acolor:'blue',
        bcolor:'red'
      }
    },
    methods:{
      getColor(colors){
        //父組件就可以拿到子組件傳過來的colors
        console.log(colors)
        this.acolor = "white";
        this.bcolor = colors;
      },
      //接收多個參數(shù)
      /*getColor(colors1,colors2){
        console.log(colors1,colors2)
        this.acolor = colors2;
        this.bcolor = colors1;
      }*/
    },
    components: {
      'mybtn' : {
        props : ['parentid','title'],
        template : `
          <div class="box">
            <p>我最初是一張白紙</p>
            <button @click="changeColor">我是{{parentid}}號按鈕{{title}}</button>
          </div>
        `,
        methods: {
          changeColor(){
          //這個方法是觸發(fā)父組件中的事件，第一個參數(shù)是觸發(fā)的事件名稱。第二個參數(shù)及以后是向changeColorEvent傳的參數(shù)
           this.$emit('changeColorEvent',"orange")
           //發(fā)送多個參數(shù)可以直接跟在后面
           //this.$emit('changeColorEvent',"orange","white")
          }
        }
      }
    }
  }
</script>
<style scoped>

</style>

4、非父組件之間傳值

步驟：

(1)方法一、

①建立一個公共的通信組件(Vue)，需要傳值的組件里引入該通信組件

②在一個中綁定一個事件this.on('eventname', this. id)

③在另一個組件中觸發(fā)事件this.$ emit('eventname',( options)=>{})

(2)方法二、

在本地存儲中添加公共數(shù)據(jù)，可以在兩個頁面中獲取，更改

以上是“vue組件傳值的方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！