一般来说在vue的数据传递是在父组件传子组件通过属性来传,子组件传父组件通过事件来传值。
一、父组件向子组件传值(父组件通过自定义属性传值,子组件通过props接收)
父组件自定义placeholder属性。
// 父组中引用的子组件
<NavBar :placeholder="isPlaceholder"></NavBar>
import NavBar from '@/components/NavBar.vue'
components: { NavBar }
data () {
return {
isPlaceholder: true
}
}
子组件NavBar中通过props接收placeholder的传值
props: {
placeholder: {
type: Boolean,
default: false
}
}
二、子组件通过this.$emit()的方式将值传递给父组件,父组件里面的子组件通过@function绑定一个函数来处理
子组件NavBar中
watch: {
// 监听整体高度,为父组件提供导航栏高度
integralHeight: {
immediate: true,
handler (newValue) {
if (newValue) {
this.$emit('getNavBarIntegralHeight', newValue)
}
}
}
},
父组件
<NavBar @getNavBarIntegralHeight="setContentPaddingTop"></NavBar>
methods: {
setContentPaddingTop (integralHeight) {
console.log('父组件中获取的导航栏高度:', integralHeight)
}
}
通过vuex来传递组件间的数据
vuex就是把数据放到内存里面去,各个组件间都可以共享vuex里面的数据
通过中央总线来传递组件间的数据
对于一些项目里可能是同级组件之间的传递,又没有必要使用Vuex,针对这种情形可以使用中央事件总线(Event Bus)来解决问题,主要用到vue对象的on和emit事件,在同一个vue的实例可以触发这两个事件,比如子组件传递数据到父组件,在子组件通过同一个vue对象触发emit事件传递数据,在父组件通过vue实例的on监听刚刚emit触发的事件来获取子组件传递过来的数据
先创建一个constantsBus.js文件,里面根据不同模块创建相关的vue实例
/**
* 不同组件间通讯用的 中央事件总线
*/
import Vue from 'vue';
//用户管理总线
export const userBus = new Vue();
//管理员管理总线
export const adminBus = new Vue();
在一个组件间调用$emit传递数据
//引用刚刚创建的constantsBus.js
import * as constantsBus from '@/common/constantsBus';
在另个接收数据的组件用$on来监听获取emit传过来的数据
//引用刚刚创建的constantsBus.js
import * as constantsBus from '@/common/constantsBus';
created() {
//监听子组件的事件,获取其他组件传递过来的data数据
constantsBus.processBus.$on('processChooseAssessor', data => {
//获取emit触发的processChooseAssessor事件传递过来的data数据
});
}
通过修改父组件传过来的对象属性
一般来说在vue的数据传递是在父组件传子组件通过属性来传,但是通过属性来传值,是单向的,子组件不能修改父组件的prop值,如果在子组件里面修改父组件传过来的prop属性值,会报错,但是也有例外,对象类型的除外,如果父组件传给子组件的属性是对象的话,是可以修改对象里面的值的,并且修改后也对父组件可见,因为对象的话最后的引用都是指向同一块内存,不受子组件不可以修改父组件的属性约束。(不过不建议这样处理,子组件可以修改父组件的属性会污染数据传递,可能以后在那个子组件改了都不知道,一般对象的传递要深拷贝)
父组件使用子组件的引用ref调用子组件的方法获取子组件的数据
在子组件写一个获取数据的方法
父组件通过子组件的ref调用这个方法获取子组件的数据
<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload>
let fileList = this.$refs.trademarkFileUpload.getFileList()