简单易懂的 vue父子组件传值

vue父子组件传值

1.父向子 传递数据：

在父组件中把子组件当做标签引入，通过设置标签的属性传递数据，
在子组件用props接受，将父组件的数据number通过设置标签child的number属性传递给子组件，
子组件通过props传递接受，接受后，在子组件内this.number就是父组件的number数据。

父组件代码如下(分步骤)：

<template>
    <div>
        <!-- 4.将子组件当做标签引入，并赋要传的值 -->
        <child :number="number"></child>
    </div>
</template>

<script>
    import child from '@/child'  //1.在父组件中引入子组件
    export default {
        data() {
            return {
                number:1   //3.定义要传的值
            }
        },
        comments:{
            child   //2.在父组件中注册子组件  （已在router > index.js 文件中注册过可忽略此步）
        },
    }
</script>

子组件代码如下(分步骤)：

<template>
    <div>
        {{number}} //使用
    </div>
</template>
<script>
    export default {
       props:{
         number:Number //接收props传递的number，后面写数据类型，传的什么类型就写什么，首字母大写
       }
    }
</script>

2.子向父 传递数据：

子向父传值需要 父组件绑定一个事件，子组件通过$emit调用这个事件把值传过去
子组件代码如下：

<template>
    <div>
    	<!-- 1.调用一个方法 -->
        <div @click="toFather()">子向父传值</div> 
    </div>
</template>
<script>
    export default {
        methods: {
            toFather(){
                this.$emit('fromChild','123') //通过$emit调用父组件中定义绑定的方法
                //括号里('是父组件绑定的事件名','要传的')
            }
        },
    }
</script>

父组件代码如下(分步骤)：

<template>
    <div>
        <!-- 1.给子组件标签绑定一个方法  触发这个方法后调用另一个处理传来的数据的方法 -->
        <child @fromChild="fatherFUN(val)"></child> 
    </div>
</template>
<script>
    import child from '@/child'
    export default {
        methods: {
            //2.处理传来的数据的方法
            fatherFUN(val){
                console.log(val)
            }
        },
        comments:{
            child
        },
    }
</script>

3.兄弟组件传递数据 eventBus

同级传或隔级传可以用eventBus,自行百度吧，兄弟传值一般用不上