Vue框架--父子组件传值的方式

父组件传值给子组件：

        1.父组件中自定义属性，子组件用props接收。

        2.子组件中用this.$parent接收父组件的值

        3.使用 this.$attrs进行深传值

子组件传值给父组件：

        1.父组件中自定义方法，子组件中用$emit传值给父组件

         2.父组件用this.$children接收子组件的值

        3.子组件绑定ref属性，父组件用this.$refs.绑定的属性值.子组件的数据 获取子组件的值

父传子：

1.父组件中自定义属性，子组件用props接收。

父组件代码：

<template>
    <div>
        <Page1 :tran="info"></Page1>
    </div>
</template>

<script>
import Page1 from "./components4/Page1.vue"

export default {
    data(){
        return{
            info:"我是父组件传过来的值"
        }
    },
    components:{
        Page1
    }
}
</script>

子组件代码：

<template>
    <div>
        <div class="box">{
   {tran}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return{}
    },
    props:["tran"]
}
</script>

<style>
.box {
    width: 200px;
    height: 100px;
    text-align: center;
    background-color:lightpink;
}
</style>

结果：

2.子组件中用this.$parent接收父组件的值

父组件：