Vue 教程(二十一)子组件传参父组件

Posted 2021-09-04 _否极泰来_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(二十一)子组件传参父组件相关的知识，希望对你有一定的参考价值。

Vue 教程(二十一)子组件传参父组件

要点

通过事件向父组件发送消息 this.$emit()

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件子组件传父组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <template id="subCategoryTemplate">
        <div>
            <button v-for="(item,index) in categoryList" v-on:click="btnClick(item)">{{item.name}} </button>
        </div>
    </template>

    <div id="app">
        <sub-category-component @parent-click="handle"></sub-category-component>
    </div>
    <script>
        // 子组件
        const subCategoryComponent = {
            template: "#subCategoryTemplate",
            data() {
                return {
                    categoryList:[
                        {id:"1994523",name:"编程语言与程序设计"},
                        {id:"1994544",name:"操作系统"},
                        {id:"1994248",name:"网络与通信"},
                        {id:"1994250",name:"单片机与嵌入式"}
                    ]
                }
            },
            methods: {
                btnClick(item) {
                    // 发射事件的名称和参数
                    this.$emit("parent-click", item);
                }
            }
        }

        // 父组件
        const app = new Vue({
            el: "#app",
            components: {
                subCategoryComponent
            },
            methods: {
                handle(item){
                    console.info(item);
                }
            }
        });
    </script>
</body>

</html>

– 以上为《Vue 教程(二十一)子组件传参父组件》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue 教程(二十一)子组件传参父组件的主要内容，如果未能解决你的问题，请参考以下文章

第八篇：Vue组件传参

vue初始化数据处理组件传参路由传参全局定义CSS与JS组件生命周期