Vue的自定义组件之间的数据传递

一，父级传向子级

1，在子级的属性中添加props:['myname',......]，参数可以传多个，看具体而定；

2，在父级data中定义好需要传递的变量数据，例如name:"rose";

3，在父级template中的子级引用的标签内，利用v-bind:绑定需要传递的数据，例如<son v-bind:myname="name" .....></son>，此时的myname对应子级props所定义的myname，而name对应父级data里的name；

4，此时，在子级中引用{{myname}}就可以得到父级所传递的数据："rose"。

例子如下：

 

复制代码
 1 <body>
 2     <div id="app">
 3         <father></father>
 4     </div>
 5     <script>
 6         // 创建父级组件
 7         Vue.component('father', {
 8             template: `
 9                 <div class="box">
10                     <h3>父级组件</h3>
11                     <p>我儿子的名字叫{{mysonname}}</p>
12                     <son :myname="mysonname"></son>
13                 </div>
14             `,
15             // 这里的data要求是函数模式,并且返回一个全新的对象
16             data() {
17                 return {
18                     mysonname: "Jack",
19                 }
20             },
21             // 创建子级组件
22             components: {
23                 son: {
24                     template: `
25                         <div>
26                             <h4>子级组件</h4>
27                             <p>我的名字叫{{myname}}</p>
28                         </div>
29                     `,
30                     // props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
31                     props: ['myname', 'a', 'b']
32                 }
33             }
34         })
35 
36         var vm = new Vue({
37             el: '#app',
38             data: {
39 
40             }
41         })
42     </script>
43 </body>
复制代码

 

二，子级向父级传递参数

1，在子组件方法体利用this.$emit('emitName',this.name)把数据发送到父组件;

2，在父组件方法体中定义方法，例如getName(value){}，用于接收数据;

3，在父组件引用的子组件中写入@emitName="getName"，例如<sonCom @emitName="getName"></conCom>，"@emitName"中的"emitName"对应子组件this.$emit()中的第一个参数'emitName'；

4，父组件调用方法getName(value){ }，value就等于子组件传过来的this.name;

例子如下：

复制代码
 1 // 创建父级组件
 2         Vue.component('father', {
 3             template: `
 4                 <div class="box">
 5                     <h3>父级组件</h3>
 6                     <p>儿子，3 + 5 = {{answer}}</p>
 7                     <son @tellAns="getAns"></son>
 8                 </div>
 9             `,
10             // 这里的data要求是函数模式,并且返回一个全新的对象
11             data() {
12                 return {
13                     answer: "?"
14                 }
15             },
16             methods: {
17                 getAns(res) {
18                     // console.log(res);
19                     this.answer = res;
20                 }
21             },
22             // 定义子级组件
23             components: {
24                 son: {
25                     template: `
26                         <div>
27                             <h4>子级组件</h4>
28                             <button @click="answerQ">回答</button>
29                         </div>
30                     `,
31                     // props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
32                     methods: {
33                         answerQ() {
34                             this.$emit('tellAns', 8);
35                         }
36                     }
37                 }
38             }
39         })
复制代码

 

三，兄弟级之间传递参数

1，创建事件总线let eventBus = new Vue();

2，在A方法体里调用eventBus.$emit("emitName",'jack');

3，在B方法体里接收，eventBus.$on("emiName",(value)=>{})，此时的value就等于A中传递过来的jack。

此方法通用，适合父级传子级，子级传父级，同级之间传递。

例子如下：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script>
　　　　　//创建事件总线对象
        let eventBus = new Vue();
　　　　　//创建父级组件
        Vue.component('father', {
            template: `
                    <div class="father">
                            <son1></son1>
                            <son2></son2>
                    </div>
                `,
　　　　　　　//创建子级组件
            components: {
                son1: {
                    template: `
                            <div>
                                <h2>A</h2>
                                <div>B,你叫{{bName}}</div>
                            </div>
                        `,
                    data() {
                        return {
                            bName: "?"
                        }
                    },
                    mounted() {
                        eventBus.$on("tellName", (value) => {
                            this.bName = value;
                        })
                    }
                },
                son2: {
                    template: `
                            <div>
                                <h2>B</h2>
                                <button @click="tellMyName">告诉你</button>
                            </div>
                        `,
                    methods: {
                        tellMyName() {
                            eventBus.$emit("tellName", "jack");
                        }
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>
</html>
复制代码

 

posted @   藝y  阅读(3366)  评论(1)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
AI IDE Trae