vue组件父子组件，子子组件传值

第一种：父组件传值给子组件

父组件：

<template>
    <child :value='info'></child>
</template>

<script>
import child from '自组件路径'
export default {
    name:'parent',
    data(){
        return{
            info:'我是传送给子组件的内容'
        }
    }
}
</script>

子组件：

<template>
    <p>{{value}}</p>
</template>

export default {
    name:'child',
    data(){
        return{}
    },
    props:['value']//这个需和父组件中的一致
}

第二种：子组件传值给父组件

父组件：

<template>
    <child @value='info'></child>
    <p>{{content}}</p>
</template>

<script>
import child from '自组件路径'
export default {
    name:'parent',
    data(){
        return{
            content:''
        }
    },
    methods:{
        info(val){
            this.content=val;
        }
    }
}
</script>

子组件：

<template>
    <input @change='getinfo' v-model="content">
</template>

export default {
    name:'parent',
    data(){
        return{
            content:''
        }
    },
    methods:{
        getinfo(){
            this.$emit('value',this.content);//此处的'value'，需和父组件的一致
        }
    }
}
</script>

第三种：子子组件传值

子子组件不能直接传值，需借助父组件，代码就不贴了讲一下思路

子组件先将值传递到父组件内，父组件再将值传送至另一个子组件内，复杂的传递推荐使用vuex