组件之间的信息传递
2019-07-23 本文已影响0人
0981b16f19c7
父组件向子组件传递信息：props
组件实例的作用域是孤立的，这意味着不能也不应该在子组件的莫版内直接引用父组件的数据。
单向数据流：当父组件属性变化时，将传递给子组件，但是反过来不会。
1）父组件中定义值 2）调用子组件并引用 3）在引用的标签上给子组件传值 4）子组件利用props接收父组件传过来的值
子组件接收父组件的值分为引用类型（数组、对象）和普通类型（字符串、数字、布尔值、null）两种。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component v-bind:message="msg"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
template:'<div>{{message}}</div>'
})
var app=new Vue({
el:'#app',
data:{
msg:"父子组件信息传递"
}
})
</script>
</body>
</html>
若需要在子组件中修改props的数据，可以采用以下方式：
方法1）定义局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component v-bind:message="msg"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
data(){
return {
parm:this.message
}
},
template:'<div><p>{{parm}}</p></div>'
})
var app=new Vue({
el:'#app',
data:{
msg:"父子组件信息传递"
}
})
</script>
</body>
</html>
方法2）定义计算属性，处理props的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component v-bind:message="msg"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
computed: {
changeText: function () {
return this.message.trim().toLowerCase()
}
},
template:'<div><p>{{message}}+{{changeText}}</p></div>'
})
var app=new Vue({
el:'#app',
data:{
msg:" Hello BaBy"
}
})
</script>
</body>
</html>
子组件向父组件传值:this.$emit
1）在子组件中创建一个按钮，给按钮绑定一个点击事件 2）在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数 3）在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script>
var son_a = {
data(){
return {
m_a :100
}
},
template:"<div><button v-on:click='send_m'>传值</button></div>",
methods:{
send_m(){
this.$emit('more',this.m_a);
}
},
};
var father={
data(){
return{
m:10
}
},
template:"<div>fddfdf<son_a v-on:more='givemore'></son_a>father收到的值为：{{this.m}}</div>",
methods:{
givemore(val){
this.m=val;
}
},
components:{
"son_a":son_a
}
};
new Vue({
el: "#app",
components:{
"father":father
}
});
</script>
</body>
</html>
示例（同时存在父组件向子组件传值，子组件向父组件传值）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<father ></father>
</div>
<script>
var son = {
props:["money"],
template:"<div>son:我收到father{{money}}元。<button v-on:click='getmore'>多给一点</button></div>",
methods:{
getmore(){
this.$emit('more',1000);
}
},
};
var father={
data(){
return {
m:100
}
},
template:"<div>father给你{{m}}元。<son v-bind:money='m' v-on:more='givemore'></son></div>",
methods:{
givemore(val){
this.m=val;
}
},
components:{
"son":son
}
};
new Vue({
el: "#app1",
components:{
"father":father
}
});
</script>
</body>
</html>
嵌套组件信息传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<father v-bind:message_father="msg"><son v-bind:message_son="message_father"></son></father>
</div>
<script>
var son = {
props:["message_son"],
template:"<div>son:{{message_son}}</div>",
};
var father={
props:["message_father"],
template:"<div>father:{{message_father}}</div>",
components:{
"son":son
}
};
new Vue({
el: "#app1",
data(){
return {
msg:"INFO"
}
},
components:{
"father":father
}
});
</script>
</body>
</html>
兄弟组件信息传递
方法1）子传父，父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<father></father>
</div>
<script>
var son_b = {
props:["m_b"],
template:"<div>son_b:我收到由兄弟A给的{{m_b}}元。</div>",
};
var son_a = {
props:["m_a"],
template:"<div>son:我收到father{{m_a}}元。<button v-on:click='getmore'>多给一点</button></div>",
methods:{
getmore(){
this.$emit('more',1000);
}
},
};
var father={
data(){
return {
m:100
}
},
template:"<div>father给你{{m}}元。<son_a v-bind:m_a='m' v-on:more='givemore'></son_a><son_b v-bind:m_b='m'></son_b></div>",
methods:{
givemore(val){
this.m=val;
}
},
components:{
"son_a":son_a,
"son_b":son_b
}
};
new Vue({
el: "#app1",
components:{
"father":father
}
});
</script>
</body>
</html>
方法2）借助中央总线
