vue组件间传值

案例是三个组件之间进行传值，为了好区分，将父、子组件改名为：父组件、儿组件、孙组件，三代之间进行传值。
父组件：one.vue
儿组件：two.vue
孙组件：three.vue

一、父子组件间传值

1.vue框架传值常用的有：

（1）父传子，在父组件里面的子组件上通过v-bind绑定一个变量传给子组件，对应的子组件里面通过props来接受；

（2）子传父：在父组件里面的子组件上自定义个一个方法，用来接受子组件传上来的数据

 代码如下：

 父组件

<template>
    <div>
        <com-view :show="isShow" @onClick="getComView"></com-view>
    </div>
</template>

<script>
import comView from "@/components/comView";
export default {
    name: "index",
    components: {
        comView,
    },
    data() {
        return {
            isShow:false,
            name: '123123',
        };
    },
    methods: {
        getComView(val){
            //接收子组件传回的数据信息
            this.name = val;
        },
    }
}
</script>

子组件：使用props接收父组件数据，通过$emit向父组件传值

<template>
    <div>
        <div v-if="isShow" @click="onComView">{{name}}</div>
    </div>
</template>

<script>
export default {
    name: "comView",
    props: [
        'isShow',
    ],
    data() {
        return {
            name: '123123',
        };
    },
    methods: {
        onComView(){
            this.$emit('onClick',name);
        },
    }
}
</script>