欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年03月20日 09:25:02   作者：景天科技苑  
vue中每個組件都是隔離的,包括父組件和子組件,各組件之間需要數據通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧

組件傳值

vue中每個組件都是隔離的，包括父組件和子組件，各組件之間需要數據通信，就涉及到了組件傳值
通過prop屬性進行傳值，值是數組

1.父組件往子組件傳值

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

比如:動態(tài)傳值 <Vheader :ff="num"></Vheader>
靜態(tài)傳值:<Vheader ff="123"></Vheader>   #靜態(tài)傳值，父標簽數據發(fā)生變化，子標簽數據不會變化，值不會變

?2.在子組件中使用props屬性聲明:比如:props:[‘ff’, ]，然后子組件就可以將ff作為一個數據屬性來使用了

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

在度組件模板標簽中定義屬性

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

在子組件中接收父組件傳來的值，使用props屬性接收

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

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

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

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

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

瀏覽器查看傳值成功

使用父組件傳遞數據給子組件時, 注意一下幾點:

1.傳遞數據是變量,則需要在屬性左邊添加冒號.

傳遞數據是變量,這種數據稱之為"動態(tài)數據傳遞"

傳遞數據不是變量,這種數據稱之為"靜態(tài)數據傳遞"

2.父組件中修改了數據,在子組件中會被同步修改,但是,子組件中的數據修改了,是不是影響到父組件中的數據. 不影響

這種情況,在開發(fā)時,也被稱為"單向數據流"，父組件數據修改后，子組件數據也會變，但改變子組件的值，父組件數據不會變

2.子組件往父組件傳值

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

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

b.父組件中的methods中寫一個自定義的事件函數：appFatherHandler(val){}，在函數里面使用這個val，這個val就是上面子組件傳過來的數據

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

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

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

2、子組件中的操作

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

未點擊之前，son_data的值為空

點擊觸發(fā)傳值，子組件的值已經傳給了父組件

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

什么是平行組件，看圖

平行組件傳值依賴vue對象，一般是新建一個不帶有任何參數的vue對象，平行組件都可以往該對象中存放值，平行組件都可以從該對象拿值

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

let bus = new Vue()

組件1

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

組件2：

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

瀏覽器展示，沒點擊之前，數據為空

點擊之后，就把Vheader組件的header_num 屬性值穿來過來

總結，如上就是vue中常用的各種組件間傳值的方法與案例分享，vue框架使用以及案例剖析，持續(xù)更新中!!!

到此這篇關于vue中組件間多種傳值方式的文章就介紹到這了,更多相關vue組件間傳值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論