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

10年積累的成都做網(wǎng)站、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有社旗免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

組件傳值方式：1、通過路由進行傳值；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ā)自定義事件，并傳參?！?code>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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：vue組件傳值的方式有哪些
標(biāo)題路徑：http://jinyejixie.com/article4/ppejoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站內(nèi)鏈、域名注冊、商城網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站改版

廣告

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