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 @ 2018-11-03 21:50  藝y  阅读(3345)  评论(1编辑  收藏  举报