单向数据流

子组件访问父组件的数据

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>

子组件访问父组件的数据

猜你喜欢