vue.js --父子组件通信

最新推荐文章于 2023-07-11 20:36:45 发布

爱划水de鲸鱼哥～

最新推荐文章于 2023-07-11 20:36:45 发布

阅读量264

点赞数 1

分类专栏： Vue3 文章标签： vue html javascript vue.js es6

本文链接：https://blog.csdn.net/m0_47901007/article/details/118582044

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

父子组件通信

父子组件通信：子组件使用父组件数据（属性和方法）。vue是单项数据流，因此在通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数。

父组件向子组件通信

子组件通过props接收

父组件调用子组件并通过自定义属性传入数据，子组件通过props接收父组件传递的数据，进行验证使用。
代码演示：

<!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>vue父子组件通信</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    num: 0
                }
            },
            //父组件通过自定义属性 count 传参
            template:`<demo :count="num"/>`
        })
        app.component('demo', {
        	//子组件通过 props 接收父组件传递的参数
            props:['count'],
            //子组件在模板中使用父组件传递过来的参数
            template:`<div>{{count}}</div>`
        })
        const vm = app.mount('#root');
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

子组件向父组件通信

$emit自定义事件

子组件通过$emit自定义事件，向父组件进行传值；

父组件使用子组件自定义事件，通过事件方法接收子组件的传值；

代码演示：

	    <script>
        const app = Vue.createApp({
            data(){
                return {
                    num: 0
                }
            },
            methods: {
                handleAddOne( param ){
                    this.num = param;
                }
            },
            //父组件使用子组件自定义事件
            template:`<demo :count="num" @add-one="handleAddOne"/>`
        })
        app.component('demo', {
            props:['count'],
            methods: {
                handleClick(){
                	//子组件通过$emit自定义事件，向父组件传值
                    this.$emit('addOne', this.count + 5);
                }

            },
            template:`<div @click="handleClick">{{count}}</div>`
        })
        const vm = app.mount('#root');
    </script>

页面效果：

初始状态
在这里插入图片描述
点击一次

点击两次

点击触发事件，页面效果符合预期。

v-model改造$emit传递父组件数据

$emit传递单个父组件数据

代码演示：

<script>
        const app = Vue.createApp({
            data(){
                return {
                    num: 0
                }
            },
            methods: {
                handleAddOne( param ){
                    this.num += param;
                }
            },
            template:`<demo v-model="num"/>`
        })
        app.component('demo', {
            props:['modelValue'],   // props 接受参数必须是 modelValue
            methods: {
                handleClick(){
                    this.$emit('update:modelValue', this.modelValue + 5);
                     // update:modelValue 也是固定写法
                }

            },
            template:`<div @click="handleClick">{{modelValue}}</div>`
        })
        const vm = app.mount('#root');
    </script>

props 参数可以换成其他参数名（如：app），但要在子组件上修改为 v-model:其他参数名（如：v-model:app）。

	<script>
        const app = Vue.createApp({
            data(){
                return {
                    num: 0
                }
            },
            methods: {
                handleAddOne( param ){
                    this.num += param;
                }
            },
            template:`<demo v-model:app="num"/>`
        })
        app.component('demo', {
            props:['app'],  
            methods: {
                handleClick(){
                    this.$emit('update:app',this.app + 5); 
                }

            },
            template:`<div @click="handleClick">{{app}}</div>`
        })
        const vm = app.mount('#root');
    </script>

$emit传递多个父组件数据

代码演示：

<script>
        const app = Vue.createApp({
            data(){
                return {
                    num: 0,
                    num1: 0
                }
            },
            methods: {
                handleAddOne( param ){
                    this.num += param;
                }
            },
            template:`<demo v-model:app="num" v-model:app1="num1"/>`
        })
        app.component('demo', {
            props:['app',"app1"],  
            methods: {
                handleClick(){
                    this.$emit('update:app',this.app + 5); 
                },
                handleClick1(){
                    this.$emit('update:app1',this.app1 + 5); 
                }

            },
            template:`
            <div @click="handleClick">{{app}}</div>
            <div @click="handleClick1">{{app1}}</div>
            `
        })
        const vm = app.mount('#root');
    </script>

总结

父子组件通信：vue是单项数据流，父组件传递数据给子组件使用，子组件触发父组件事件对数据进行处理

父组件向子组件通信：使用props传递数据

子组件向父组件通信：使用$emit触发父组件的事件

（完）

爱划水de鲸鱼哥～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
6
评论
vue.js --父子组件通信

目录父子组件通信父组件向子组件通信通过props传递数据子组件向父组件通信通过$emit传递父组件数据v-model改造$emit传递父组件数据$emit传递单个父组件数据$emit传递多个父组件数据总结父子组件通信父子组件通信：子组件使用父组件数据（属性和方法）。vue是单项数据流，因此在通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数。父组件向子组件通信通过props传递数据通过props传递数据，像方法的传参一样，父组件调用子组件并传入数据，子组件
复制链接

扫一扫