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 = econsole.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实例

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传值不是响应式的,两种写法变成响应式的

箭头函数写法

爷组件

  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}}