父组件向子组件传递数据

父组件向子组件传递数据使用props进行传递 ::: info 简单来说，我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。 ::: 父组件

<template>
  <child :data="title"></child>
</template>
<script>
    import child from './child'
    export default {
        components: {
            child
        },
        data(){
            return {
                title:"我是传递的数据"
            }
        }
    };
</script>

子组件（child.vue）

<template>
  <div>{{data}}</div>
</template>
<script>
    export default {
        props:["data"],
        created () {
             console.log(this.data);
             //输出：我是传递的数据
        },
    };
</script>

子组件向父组件传递数据

子组件向父组件传递数据使用this.$emit进行传递 父组件

<template>
  <child @on-child-data="handleChildData"></child>
</template>
<script>
    import child from './child'
    export default {
        components: {
            child
        },
        methods:{
           handleChildData(value){
                console.log(value);
                //输出：我是父组件传递的数据
           }
        }
    };
</script>

子组件（child.vue）

<template>
  <div @click="handleClick">我要向子组件传递数据</div>
</template>
<script>
    export default {
        methods:{
           handleClick(){
               let content = '我是父组件传递的数据'
               this.$emit('on-child-data',content)
           }
        }
    };

</script>