一，父级传向子级
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"。
例子如下：
<body>
<div id="app">
<father></father>
</div>
<script>
// 创建父级组件
Vue.component('father', {
template: `
<div class="box">
<h3>父级组件</h3>
<p>我儿子的名字叫{{mysonname}}</p>
<son :myname="mysonname"></son>
</div>
`,
// 这里的data要求是函数模式,并且返回一个全新的对象
data() {
return {
mysonname: "Jack",
}
},
// 创建子级组件
components: {
son: {
template: `
<div>
<h4>子级组件</h4>
<p>我的名字叫{{myname}}</p>
</div>
`,
// props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
props: ['myname', 'a', 'b']
}
}
}) var vm = new Vue({
el: '#app',
data: { }
})
</script>
</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;
例子如下：
// 创建父级组件
Vue.component('father', {
template: `
<div class="box">
<h3>父级组件</h3>
<p>儿子，3 + 5 = {{answer}}</p>
<son @tellAns="getAns"></son>
</div>
`,
// 这里的data要求是函数模式,并且返回一个全新的对象
data() {
return {
answer: "?"
}
},
methods: {
getAns(res) {
// console.log(res);
this.answer = res;
}
},
// 定义子级组件
components: {
son: {
template: `
<div>
<h4>子级组件</h4>
<button @click="answerQ">回答</button>
</div>
`,
// props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
methods: {
answerQ() {
this.$emit('tellAns', 8);
}
}
}
}
})
三，兄弟级之间传递参数
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>