Vue.js的组件传值相关问题解析

一、父组件向子组件传值
    1. props属性传值
    父组件通过props传递数据给子组件，子组件通过props接收传递的数据。例如：

    父组件代码：
    <template>
        <child-component :prop-data="parentData"></child-component> 
    </template>
    <script>
        export default {
            name: "ParentComponent",
            data() {
                return {
                    parentData: "父组件数据"
                };
            }
        }
    </script>

    子组件代码：
    <template>
        <div>{{propData}}</div>
    </template>
    <script>
        export default {
            name: "ChildComponent",
            props: {
                propData: String
            }
        }
    </script>

    2. $emit事件传值
    父组件通过$emit触发一个事件，子组件通过$on绑定这个事件。例如：

    父组件代码：
    <template>
        <child-component @custom-event="getResult"></child-component>
    </template>
    <script>
        export default {
            name: "ParentComponent",
            methods: {
                getResult(data) {
                    console.log(data);
                }
            }
        }
    </script>

    子组件代码：
    <template>
        <button @click="handleClick"></button>
    </template>
    <script>
        export default {
            name: "ChildComponent",
            methods: {
                handleClick() {
                    this.$emit("custom-event", "子组件数据");
                }
            }
        }
    </script>

二、子组件向父组件传值
    1. $emit事件传值
    子组件通过$emit触发一个事件，父组件通过$on绑定这个事件。例如：

    子组件代码：
    <template>
        <button @click="handleClick"></button>
    </template>
    <script>
        export default {
            name: "ChildComponent",
            methods: {
                handleClick() {
                    this.$emit("custom-event", "子组件数据");
                }
            }
        }
    </script>

    父组件代码：
    <template>
        <child-component @custom-event="getResult"></child-component>
    </template>
    <script>
        export default {
            name: "ParentComponent",
            methods: {
                getResult(data) {
                    console.log(data);
                }
            }
        }
    </script>

    2. $attrs和$listeners传值
    子组件通过继承$attrs和$listeners对象传递数据，父组件通过v-bind和v-on绑定这两个对象。例如：

    子组件代码：
    <template>
        <div v-bind="$attrs" v-on="$listeners">{{childData}}</div>  
    </template>
    <script>
        export default {
            name: "ChildComponent",
            data() {
                return {
                    childData: "子组件数据"
                };
            }
        }
    </script>

    父组件代码：
    <template>
        <child-component :parent-data="parentData" @custom-event="getResult"></child-component>
    </template>
    <script>
        export default {
            name: "ParentComponent",
            data() {
                return {
                    parentData: "父组件数据"
                };
            },
            methods: {
                getResult(data) {
                    console.log(data);
                }
            }
        }
    </script>