Vue父子元件之間傳遞資料

阿新 • • 發佈：2021-09-13

父元件向子元件傳遞資料使用子元件的props屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    key=value  獲取靜態資料-->
<!--    :key=value  獲取父元件中的資料-->
<!--    @key=value  給子元件繫結父元件的事件-->
    <login title="我是靜態標題" :name1="name" @test="test1"></login>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const login = Vue.component('login',{
        template:`<div><h2 @click="test">使用者登入 ==> {{title}} ===> {{name1}}</h2></div>`,
        data(){
            return{
            }
        },
        props:['title','name1'],
        methods:{
            test(){
                alert("我是子元件的方法");
                this.$emit('test');
            }
        }
    });


    new Vue({
        el:"#app",
        data:{
            msg:"gzy",
            name:"動態獲取父元件的title"
        },
        methods:{
            test1(){
                alert("我是父元件中的方法");
            }
        }
    });
</script>

子元件向父元件傳遞資料通過方法傳遞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    //子元件呼叫父元件的方法，駝峰命名法不能呼叫，要將其改為小寫-->
<!--    @key=value(方法名) 向子元件傳遞方法-->
    <login @testParent="testParent"></login>

</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    //全域性子元件
    const login = Vue.component('login',{
        template:`<div><h2><button @click="testChild">我是子元件</button></h2></div>`,
        data(){
            return {
                msg:"我是子元件中的資訊"
            }
        },
        methods:{
            testChild(){
                alert("我是子元件的testChild方法");
                //子元件呼叫父元件的方法，駝峰命名法不能呼叫，要將其改為小寫
                //這裡emit裡的字串填寫的時子元件@後的字串
                //將子元件裡的資料可以通過引數回傳給父元件
                this.$emit('testparent',this.msg);
            }
        }
    })

    new Vue({
        el:"#app",
        data:{
            msg:"我是父元件的資訊"
        },
        methods:{
            //子元件回傳資料需要用被子元件傳遞的方法接受引數
            testParent(msg){
                alert("我是父元件中的方法testParent");
                alert(this.msg);
                this.msg = msg;
                alert(this.msg);
                alert("子元件向父元件傳遞引數成功");
            }
        }
    });
</script>

總結

1.使用元件時可以在元件上定義多個屬性以及對應資料
2.在元件內部可以使用props陣列生命多個定義在元件上的屬性名 日後可以在元件中通過{{ 屬性名 }} 方式獲取元件中屬性值
3.使用v-bind形式將資料繫結Vue例項中data屬性,日後data屬性發生變化,元件內部資料跟著變化
4.元件中定義事件和直接在Vue中定義事件基本一致 直接在元件內部對應的html程式碼上加入@事件名=函式名方式即可
5.在元件內部使用methods屬性用來定義對應的事件函式即可,事件函式中this 指向的是當前元件的例項
6.在子元件中呼叫傳遞過來的相關事件必須使用 this.$emit('函式名') 方式呼叫