一、父传参(自定义属性 - props)
父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用.
//父组件代码 渲染子组件
<Son :sonName="uname" />
// 子组件代码,接受父参数
export default {
props: {
sonName: String
}
}
二、子传父(自定义事件 - this.$emit)
子组件向父组件传数据使用自定义事件, vue组件提供了一个emit('自定义事件名', 传递的数据) ),子组件传递数据时,触发响应的事件函数,就会自动触发通过$emit给父组件绑定的自定义事件,自定义事件接受一个参数,参数就是子组件传递过来的数据
// 父组件代码,渲染子组件
<Son @pass-value="valueFn" />
export default{
method:{
valueFn(value) {}
}
}
// 子组件代码
this.$emit('pass-value', this.say)
三、兄弟之间的传参
兄弟组件之间的数据传递,通过eventBus来做中间的桥梁,传输方通过中间组件调用 on 接受数据,两者之间的自定义属性名保持一致。
// 传输方组件调用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);
// 接收方接受参数
import Bus from '@/EventBus.js'
created() {
Bus.$on('pass-value', val => {
this.sibilingValue = val;
})
}
四、通过Vuex数据共享
通过vuex存储数据, Vuex是一个专为vue.js 应用程序开发的状态管理模式, 它采用[ 集中式 ]存储管理数据,以相应的规则保证状态以一种可预测的方式发生改变, 一变全变,同步更新数据。
// 注册代码
const store = new Vue.Store({
state:{
count: 100
},
mutations: {
addCount(state, val = 1) {
state.count += val;
},
subCount(state, val = 1) {
state.count -= val;
}
}
})
// 组件调用
this.$store.commit('addCount'); // 加 1
this.$store.commit('subCount'); // 减 1
五、通过ref
ref 引用可以作用在h5标签上,也可以作用在组标签上,作用在h5标签上是获取的是DOM对象, 作用在组件标签上,通过this.$refs获取的是组件的实例对象。