vue中組件間多種傳值方式案例詳解

更新時(shí)間：2024年03月20日 09:25:02 作者：景天科技苑

vue中每個(gè)組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧

組件傳值

vue中每個(gè)組件都是隔離的，包括父組件和子組件，各組件之間需要數(shù)據(jù)通信，就涉及到了組件傳值
通過(guò)prop屬性進(jìn)行傳值，值是數(shù)組

1.父組件往子組件傳值

兩步：　　
?1.父組件在使用子組件時(shí)要定義自定義的屬性:

比如:動(dòng)態(tài)傳值 <Vheader :ff="num"></Vheader>
靜態(tài)傳值:<Vheader ff="123"></Vheader> #靜態(tài)傳值，父標(biāo)簽數(shù)據(jù)發(fā)生變化，子標(biāo)簽數(shù)據(jù)不會(huì)變化，值不會(huì)變

?2.在子組件中使用props屬性聲明:比如:props:[‘ff’, ]，然后子組件就可以將ff作為一個(gè)數(shù)據(jù)屬性來(lái)使用了

靜態(tài)傳值案例：

在度組件模板標(biāo)簽中定義屬性

// 父組件往子組件傳值，父組件定義數(shù)據(jù)
let App = {
    data(){
        return {
            name:'景浩'
        }
    },
    // 在模板中定義屬性實(shí)現(xiàn)靜態(tài)傳值 <Vheader ff="123"></Vheader> 靜態(tài)傳值
    template:
    `<div class="App">
        <Vheader ff="123"></Vheader>
        <Vcontent></Vcontent>
    </div>`,
    components: {
        Vheader,
        Vcontent
    }
}

在子組件中接收父組件傳來(lái)的值，使用props屬性接收

let Vheader = {
    //組件的屬性必須用函數(shù)方式來(lái)寫(xiě)
    data(){
        return{
            nav_lst: ['個(gè)人中心','登錄','注冊(cè)']
        }
    },
    //在子組件中接收父組件傳來(lái)的值
    template: `<div>
                <h1>{{nav_lst}}</h1>
                <h2 style="color: mediumvioletred">{{ff}}</h2>
                </div>`,
    props: ['ff'],
};

瀏覽器查看，已接收到值，并予以展示

動(dòng)態(tài)傳值案例：

接收方式不變，傳值方式使用v-bind方式

    // 父組件往子組件傳值，父組件定義數(shù)據(jù)
    let App = {
        data(){
            return {
                name:'景浩'
            }
        },
        // 在模板中定義屬性實(shí)現(xiàn)靜態(tài)傳值 <Vheader ff="123"></Vheader> 靜態(tài)傳值
        template:
        `<div class="App">
        <!-- //靜態(tài)傳值-->
<!--            <Vheader ff="123"></Vheader>-->
            <!--動(dòng)態(tài)傳值，通過(guò)v-bind的方式，變量名前面加冒號(hào)-->
            <Vheader :ff="name"></Vheader>
            <Vcontent></Vcontent>
        </div>`,
        components: {
            Vheader,
            Vcontent
        }
    }

瀏覽器查看傳值成功

使用父組件傳遞數(shù)據(jù)給子組件時(shí), 注意一下幾點(diǎn):

1.傳遞數(shù)據(jù)是變量,則需要在屬性左邊添加冒號(hào).

傳遞數(shù)據(jù)是變量,這種數(shù)據(jù)稱(chēng)之為"動(dòng)態(tài)數(shù)據(jù)傳遞"

傳遞數(shù)據(jù)不是變量,這種數(shù)據(jù)稱(chēng)之為"靜態(tài)數(shù)據(jù)傳遞"

2.父組件中修改了數(shù)據(jù),在子組件中會(huì)被同步修改,但是,子組件中的數(shù)據(jù)修改了,是不是影響到父組件中的數(shù)據(jù). 不影響

這種情況,在開(kāi)發(fā)時(shí),也被稱(chēng)為"單向數(shù)據(jù)流"，父組件數(shù)據(jù)修改后，子組件數(shù)據(jù)也會(huì)變，但改變子組件的值，父組件數(shù)據(jù)不會(huì)變

2.子組件往父組件傳值

兩步：
a.子組件中使用this.$emit(‘fatherHandler’,val); fatherHandler是父組件中使用子組件的地方添加的綁定自定義事件，
注意，如果fatherHandler報(bào)錯(cuò)了，那么可能是你的vue版本不支持自定義鍵名稱(chēng)fatherHandler中有大寫(xiě)字母，所以我們改成father-handler或者直接就全部小寫(xiě)就可以了

<Vheader @fatherHandler="appFatherHandler"></Vheader>

b.父組件中的methods中寫(xiě)一個(gè)自定義的事件函數(shù)：appFatherHandler(val){}，在函數(shù)里面使用這個(gè)val，這個(gè)val就是上面子組件傳過(guò)來(lái)的數(shù)據(jù)

案例：比如要將Vheader里面的一個(gè)屬性head_num:80 傳給父組件App，并在里面展示

1、父組件中的操作，首先在父組件中的模板中，從哪個(gè)子組件傳值就在哪個(gè)子組件標(biāo)簽中自定義一個(gè)事件，事件綁定個(gè)方法，不要與系統(tǒng)事件重名

data(){
    return {
        name:'景浩和靈鴿',
        son_data:''
    }
},
template:
`<div class="App">
    //自定義事件
    <Vheader @ffunc="receive_data"></Vheader>  
    <Vcontent></Vcontent>
    <!--   父組件展示子組件傳來(lái)的值-->
    <h1>子組件傳來(lái)的值{{son_data}}</h1>
</div>`,
//父組件定義方法，帶一個(gè)參數(shù)，用來(lái)接受子組件傳來(lái)的值
methods:{
    receive_data(val){
        //在這里將從子組件傳過(guò)來(lái)的值，賦值給父組件中的son_data屬性
        this.son_data = val
    }
}

2、子組件中的操作

    //在子組件中定義一個(gè)點(diǎn)擊事件，用來(lái)觸發(fā)傳值動(dòng)作
            //組件的屬性必須用函數(shù)方式來(lái)寫(xiě)
    data(){
        return{
            nav_lst: ['個(gè)人中心','登錄','注冊(cè)'],
            //將子組件的這個(gè)header_num傳給父組件
            header_num: 80
        }
    },
  template: `<div>
                <h1>{{nav_lst}}</h1>
                <button @click="zouni">chuanzhi</button>
                </div>`,
    //用方法定義傳值邏輯，必須使用this.$emit()方法傳值
    methods:{
        //方法的第一個(gè)參數(shù)是父組件中定義的事件名稱(chēng)，第二個(gè)是子組件的屬性
        zouni(){
            this.$emit('ffunc', this.header_num)
        }
    }

未點(diǎn)擊之前，son_data的值為空

點(diǎn)擊觸發(fā)傳值，子組件的值已經(jīng)傳給了父組件

3.平行組件傳值，兄弟組件傳值

什么是平行組件，看圖

平行組件傳值依賴(lài)vue對(duì)象，一般是新建一個(gè)不帶有任何參數(shù)的vue對(duì)象，平行組件都可以往該對(duì)象中存放值，平行組件都可以從該對(duì)象拿值

//平行組件傳值,比如我們從Vheader往Vcontent傳值，先聲明個(gè)vue對(duì)象

let bus = new Vue()

組件1

let Vheader = {
    //組件的屬性必須用函數(shù)方式來(lái)寫(xiě)
    data(){
        return{
            nav_lst: ['個(gè)人中心','登錄','注冊(cè)'],
            //平行組件傳值
            header_num: 100
        }
    },
    //
    template: `<div>
                <h1>{{nav_lst}}</h1>
                <button @click="zouni">chuanzhi</button>   通過(guò)點(diǎn)擊觸發(fā)傳值
                </div>`,
    //在加載的時(shí)候，就把屬性值放到對(duì)象bus中，使用created不能傳值
    // created(){
    //     //往公交車(chē)上放值，用$emit()
    //     console.log(1111)
    //     bus.$emit('header_data',this.header_num);
    // },
    methods:{
        zouni(){
            bus.$emit('header_data',this.header_num);   在加載的時(shí)候，就把屬性值放到對(duì)象bus中，放值用$emit()
        }
    }
};

組件2：

//平行組件拿值，用$on()
let Vcontent = {
    //組件的屬性必須用函數(shù)方式來(lái)寫(xiě)
    data(){
        return{
            content_lst: ['xx', 'oo'],
            content_num: 200,
            head_num:''   這里存放平行組件傳來(lái)的值，沒(méi)傳值時(shí)為空
        }
    },
    //組件要有自己的標(biāo)簽，用標(biāo)簽將組件自己的屬性包裹起來(lái)
    template: `<div>
                <h1 style="color: seagreen">{{content_lst}}</h1>
                <h1>平行組件傳來(lái)的值{{head_num}}</h1>
                </div>`,
    created() {
        //以鍵的形式取值，記得使用this的時(shí)候要用箭頭函數(shù)改變指引，指向vue對(duì)象
       bus.$on('header_data',val =>{
           console.log(val)
           this.head_num = val
       })
    }
};

瀏覽器展示，沒(méi)點(diǎn)擊之前，數(shù)據(jù)為空