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

Posted itpyy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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  // 创建父级组件
 2  Vue.component(‘father‘, {
 3     template: `
 4        <div class="box">
 5            <h3>父级组件</h3>
 6            <p>我儿子的名字叫{{mysonname}}</p>
 7        </div>
 8        `,
 9        // 这里的data要求是函数模式,并且返回一个全新的对象
10        data() {
11            return {
12                 mysonname: "Jack",
13            }
14         },
15         // 创建子级组件
16         components: {
17            son: {
18                 template: `
19                      <div>
20                           <h4>子级组件</h4>
21                           <p>我的名字叫{{myname}}</p>
22                       </div>
23                  `,
24             // props,组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
25             props: [‘myname‘, ‘a‘, ‘b‘]
26             }
27        }
28   })

二,子级向父级传递参数

1,在子级方法体重利用this.$emit(‘emitName‘,this.name)把数据发送到上级;

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

3,在父级template引用子级标签中写入引用方法@emitName="getName",此时的getName对应父级已定义好的方法getName;

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>

 




以上是关于Vue的自定义组件之间的数据传递的主要内容,如果未能解决你的问题,请参考以下文章

vue组件之间的五种传值方法(父子兄弟跨组件)

vue组件详解——组件通信

Vue2.0— 组件的自定义事件(十八)

vue父子组件之间的通信

vue组件之间的数据传递

在 Flex 中的自定义组件之间传递值 - mxml [关闭]