單向資料流

Dus發表於2018-11-21

子元件訪問父元件的資料

props是單向繫結的，當父元件的屬性變化時，將傳導給子元件，但是不會反過來
而且不允許子元件直接修改父元件中的資料，報錯
解決方式：
    方式1：如果子元件想把它作為區域性資料來使用，可以將資料存入另一個變數中再操作，不影響父元件中的資料
    方式2：如果子元件想修改資料並且同步更新到父元件，兩個方法：
        a.使用.sync（1.0版本中支援，2.0版本中不支援，2.3版本又開始支援）
            需要顯式地觸發一個更新事件
        b.可以將父元件中的資料包裝成物件，然後在子元件中修改物件的屬性(因為物件是引用型別，指向同一個記憶體空間)，推薦   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>

<body>
<div id="app">
    <h3>這是父元件</h3>
    <input type="text" v-model="name">{{people.age}}
    <zizujian :name.sync="name" :agea="people"></zizujian>
</div>
<hr>

<template id="app1">

    <div>
        <h3>這是子元件:{{username}}</h3>
        <h2>{{username}}</h2>
        <button @click="change">修改</button>
    </div>
</template>

</body>

<script>
new Vue({
    el: "#app",
    data:{
        name:"這是父元件",
        people: {
            age:18
        }
    },
    components: {
        'zizujian':{

            props: ['name','agea'],
            data(){
                return {
                    username: this.name
                }
            },
            template:'#app1',
            methods: {
                change: function () {
                    // this.username="6666" 第一種
                    // this.$emit('update:name',"修改完了")  第二種
                    this.agea.age=34   第三種
                }
            }


        }
    }
})



</script>
</html>

相關文章