1.父子组件传值
父组件在子组件标签中传入fatherMess,在子组件使用$emit,约定子传父事件名,将子组件的数据传递到父组件.通过按钮修改,可以发现,这里的传值是响应式的
步骤:
1.在父组件中给子组件标签添加属性
2.在子组件中使用props接受数据
3.子组件中使用数据,可以直接访问
父组件代码
<template>
<div class="container">
<div class="FaS">
<div class="son">
//将父组件值传入子组件
<FaS @getSonMess="getSonMess" :fatherMess="fatherMess"></FaS>
</div>
<el-button size="mini" @click="FtoS">父传子</el-button>
</div>
</div>
</template>
<script>
//引入子组件
import FaS from './components/FaS.vue'
export default {
//子组件注册
components: {
FaS
},
data () {
return {
fatherMess: 'hallo'
}
},
created () {
},
computed: {
},
methods: {
getSonMess (e) {
this.fatherMess = e
console.log(e, 'son to father')
},
FtoS () {
this.fatherMess = 'fatherMess'
}
}
}
</script>
<style lang='scss' scoped>
.container {
width: 100%;
height: 100vh;
}
.FaS {
width: 100%;
height: 200px;
border: 1px solid black;
background-color: gray;
display: flex;
}
.son{
width: 500px;
height: 200px;
}
</style>
子组件代码
<template>
<div class="container">
{{ this.fatherMess }}//展示来自父组件的数据
<el-button size="mini" @click="StoF">子传父</el-button>
</div>
</template>
<script>
export default {
//子组件接收父组件的值
props: ['fatherMess'],
data () {
return {
}
},
created () {
},
computed: {
},
methods: {
StoF () {
this.$emit('getSonMess', 'SonMess')
}
}
}
</script>
<style lang='scss' scoped>
.container {
width: 100%;
height: 100% !important;
background-color: pink;
}
</style>
props的类型校验和默认值
子组件接收父组件的传值,可以在props中用对象的方式对传递的数据进行校验和默认值设置
props: {
fatherMess:{
type:String,//传值必须为字符串类型
required:true,//fatherMess是必传值
default:'hallo',//fatherMess如果传递为空,子组件默认接收为'hallo'
validator(val){//对传入的值进行判断或者处理
if(vla.length<1){
//处理逻辑
}
}
},
除此之外,ref也可以实现父子双向通讯
父组件
<template>
<div class="container">
<div class="FaS">
<div class="son">
<FaS ref="son"></FaS>
</div>
{{ this.fatherMess }}
<el-button size="mini" @click="FtoS">父传子</el-button>
</div>
</div>
</template>
<script>
import FaS from './components/FaS.vue'
export default {
components: {
FaS
},
data () {
return {
fatherMess: 'hallo'
}
},
created () {
},
computed: {
},
methods: {
FtoS () {
this.$refs.son.mess = '父组件修改子组件的值'
}
}
}
</script>
子组件
<template>
<div class="container">
{{ this.mess }}
<el-button size="mini" @click="StoF">子传父</el-button>
</div>
</template>
<script>
export default {
data () {
return {
mess: 666
}
},
created () {
},
computed: {
},
methods: {
StoF () {
this.$emit('getSonMess', 'SonMess')
this.$parent.fatherMess = '子组件修改父组件的值'
}
}
}
</script>
2.非父子组件传值
$Bus
需要在main.js中单独声明一个Vue实例文章来源：https://www.toymoban.com/news/detail-836412.html
Vue.prototype.$Bus = new Vue()
传递
this.$Bus.$emit('mess', 66) // 第一个参数是事件名,第二个值是传递的数据
接收
this.$Bus.$on('mess', e => {
console.log(e)
})
注意
//注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
beforeDestroy () {
this.bus.$off('事件名', (e) => {
console.log(e)
})
}
3.后代组件传值
provide和inject传值不是响应式的,两种写法变成响应式的文章来源地址https://www.toymoban.com/news/detail-836412.html
箭头函数写法
爷组件
data () {
return {
fatherMess: 'hallo'
}
},
provide () {
return {
GtoSMess: () => this.fatherMess
}
},
孙组件
computed: {
SonMess () {
return this.GtoSMess()
}
},
对象写法
爷组件
data() {
return {
obj: {
name: "是是是"
}
}
},
provide: function() {
return {
// 传递一个对象
obj: this.obj
}
},
孙组件
inject: ['obj'],
computed: {
// 也可以不用计算属性重新定义
objName() {
return this.obj.name
}
}
到了这里，关于vue2中几种组件传值方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
