父子组件传值

父子组件传值-父传子

关于父子组件传值中的父传子，做出如下简单代码进行介绍：

    <!-- 父组件挖坑显示，但是值必须将子组件和父组件绑定，否则不能显示 -->
    <cpn :cinfo="info"></cpn>
</div>

<!-- 组件语法糖，调用子组件定义的值 -->
<template id="tem">
    <div>
        {{cinfo}}
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //子组件
    const cpn = {
        // template绑定组件语法糖，将cpn与template绑定
        template: "#tem",
        //组件中保存数据的data为什么必须是函数，而且必须有return？为了保证数据的复用，当return
        //之后，可以保证每一次出来的数据都是不一样且相互独立，当不加return时，返回的数据都是一样的
        data() {
            return {

            }
        },
        //子组件通过props接受父组件的值，此处的cinfo为自定义，与父组件中的info对应
        props: {
            cinfo: {
                //type:类型
                type: Object,
                //default：默认值
                default() {
                    return {

                    }
                }
            }
        }

    }

    //父组件
    const app = new Vue({
        el: "#app",
        data: {
            info: {
                name: "aaa",
                age: 17,
                height: 1.9
            }
        },
        //在父组件中注册子组件（我的理解就是将父组件与子组件挂钩）
        components: {
            cpn
        }
    })
</script>

以下是子传父：
div id=“app”>

<cpn :cinfo=“info” @cpnclick=“fclick”>

<!-- 组件语法糖，调用子组件定义的值 -->
<template id="tem">
    <div>
        <!-- 子组件中的点击事件需要在子组件中定义方法 -->
        <button v-for="i in but" @click="btnclick(i)">{{i.name}}</button>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //子组件
    const cpn = {
        template: "#tem",
        data() {
            return {
                but: [
                    { id: 1, name: "西医" },
                    { id: 2, name: "中医" },
                    { id: 3, name: "骗子" }
                ]
            }
        },
        methods: {
            btnclick(i) {
                //子组件通过this.$emit向父组件传递cpnclick这个方法，参数i一般可以不写
                this.$emit("cpnclick", i)
            }
        }
    }

    //父组件
    const app = new Vue({
        el: "#app",
        data: {
            info: {
                name: "aaa",
                age: 17,
                height: 1.9
            }
        },
        //在父组件中注册子组件（我的理解就是将父组件与子组件挂钩）
        components: {
            cpn
        },
        // 在父组件中定义方法，参与子组件传递的值
        methods: {
            fclick(i) {
                console.log("fclick", i)
            }
        }
    })
</script>

父子组件传值，父传子，在子组件使用props来接收，但是子传父相对麻烦，在子组件中使用this.$emit来向父组件发送自定义事件。以上是我的个人见解，不足之处，后续补出。