标签：size 赋值 temp put mod logs bsp span show
父组件传给子组件：子组件通过props方法接收数据
子组件传给父组件：通过$emit方法传递参数
一、props方法：
1.静态传值：
父组件中子组件的标签设置一个自定义属性并赋值：
<component message="hello"></component>
子组件中通过props方法接收
export default { props:[‘message‘] }
可以显示到页面上
<template>
<div>
<p>{{message}}</p>
</div>
</template>
2.动态传值：（根据父组件中值的变化，动态改变子组件中的值）
父组件中属性双向绑定：
<template>
<div>
<input type="text" v-model="hello">
<keep-alive>
<component :message="hello"></component>
</keep-alive>
</div>
</template>
<script>
export default{
data(){
return {
hello:"hello"//初始值
}
}
</script>
子组件不变；
二、通过ref实现页面间的通信
1.静态传值
父组件中设置ref属性和getMessage方法：
<template>
<div>
<keep-alive>
<component ref="msg"></component>
</keep-alive>
</div>
</template>
<script>
export default{
mounted:function () {
console.log(this.$refs.msg);
this.$refs.msg.getMessage(‘我是子组件一！‘)
}
}
</script>
子组件通过getMessage方法显示在页面中：
<template>
<div>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
data(){
return{
message:‘‘
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
</script>
prop和ref之间的区别：
2.父组件调用子组件的属性和方法
子组件中的属性与方法：
<template>
<div>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
data(){
return{
message:‘aaaaa‘
}
},
methods:{
fun(){
console.log(this.message)
console.log("调用了组件1的方法")
}
}
}
</script>
父组件中调用：
<template>
<div>
<keep-alive>
<component ref="msg"></component>
</keep-alive>
</div>
</template>
<script>
import simple1 from "./simple1.vue";
export default{
data(){
return {
}
},
methods: {
handleClick(){
this.$refs.msg.fun();//调用子组件的方法
console.log(this.$refs.msg.message)//获取子组件的属性
}
},
components: {
simple1
},
mounted () {
this.handleClick();
}
}
</script>
三、$emit方法实现通信
$emit(event,arg)
event为绑定的一个自定义事件，当他执行的时候将他的参数arg传递给父组件，父组件通过@event事件监听并接收参数。
1.静态传值
在子组件中：
template> <div> 这是子组件 </div> </template> <script> export default { data(){ return{ } }, mounted () { this.$emit(‘getFun‘,‘这里是要传的参数‘) } } </script>
在父组件中：
<template>
<div>
<p>{{title}}</p>
<keep-alive>
<component @getFun="showMsg"></component>
</keep-alive>
</div>
</template>
<script>
import simple1 from "./simple1.vue";
export default{
data(){
return {
title:‘‘
}
},
methods: {
showMsg(title){
this.title=title;
}
},
components: {
simple1
}
}
</script>
2.动态传值
子组件中：
<template> <div> 这是子组件 <input type="text" v-model="arg"> <button @click="fun">传值</button> </div> </template> <script> export default { data(){ return{ arg:‘‘ } }, methods:{ fun(){ this.$emit(‘getFun‘,this.arg) } } } </script>
父组件不变；
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递；
但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。
Vue 的状态管理工具 Vuex 完美的解决了这个问题。
原文：cnblogs.com/hlyin/p/10608660.html
标签：size 赋值 temp put mod logs bsp span show
原文地址：https://www.cnblogs.com/czh64/p/12022410.html
