1.bus传参
//1.先定义一个事件中心
var eventBus=new Vue()
//监听与销毁
eventBus.$on('add',(getData)=>{//靠回调接收数据(j)
console.log(`接收得数据为:${getData}`)
})
evnetBus.$off('add')
//触发
eventBus.$emit('add',参数) //传递数据方
2.混入mixin
局部混合,在需要的地方导入
//本质:扩展组件的对象与方法,可以共用
优先级: 值为对象,methods,components中,若发生冲突,取组件
值为函数,如created,mounted,混入先于组件调用
用法:
1.src/mixins文件夹/myMixins.js
export const myMixin {
data() {
return {
name: 'mixin'
}
},
created() {
console.log('mixin...', this.name);
},
mounted() {},
methods: {}
}
2.在vue文件中使用
import {myMixin} '@/mixins/myMixins.js'; // 引入mixin文件
export default {
mixins: [myMixin]
}
全局混合:全局都可引用
// 在/src/main.js里定义
//全局的,每个组件创建完毕输出当前时间
Vue.mixin({
created(){
console.log(this._uid,Date.now())
}
})
3.nextTick
//this.$nextTick()作用:帮助我们在改变组件中属性后,立刻拿到渲染以后的dom节点对象
this.$nextTick(()=>{
})
4.set强制刷新视图
data() {
return {
list:['沸羊羊','黑小虎','双面龟','你']
}
},
methods: {
change(){
//直接修改并不会刷新视图
// this.list[3]="段书城"
// console.log(this.list)
//强制更新
this.$set(this.list,3,"段书城")
}
},
5.父子组件传参
$parent
$children
第一种:
父组件v-bind绑定属性
<myComponent :title="data"></myComponent>
子组件通过props接收绑定属性,可以通过数组或者对象形式接收
props:{
title:{
type: String, //可指定接收类型,如:Array.
default:"this is default" //可设置默认值
}
}
第二种:
通过provide inject 无论层级多深都可以传递 数据不是响应式的
父组件provide
provide(){
return {
yeye:this
}
}
子组件inject引入
inject:['yeye']
通过watch中监听获取到的方法,实现响应式数据
父组件:
<template>
<div class="parent-container">
Parent组件
<br/>
<button type="button" @click="changeName">改变name</button>
<br/>
Parent组件中 name的值: {{name}}
<Child v-bind="{name: 'k3vvvv'}" />
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'Parent',
data () {
return {
name: 'Kevin'
}
},
methods: {
changeName (val) {
this.name = 'New Kevin'
}
},
provide () {
return {
nameFromParent: this.name,
getReaciveNameFromParent: () => this.name //将一个函数赋值给provide的一个值,这个函数返回父组件的动态数据
}
},
components: {
Child
}
}
</script>
子组件:
<template>
<div class="child-container">
Child组件
<br/>
<GrandSon />
</div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
components: {
GrandSon
}
}
</script><template>
<div class="child-container">
Child组件
<br/>
<GrandSon />
</div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
components: {
GrandSon
}
}
</script>
孙组件:
<template>
<div class="grandson-container">
Grandson组件
<br/>
{{nameFromParent}}
<br/>
{{reactiveNameFromParent}}
</div>
</template>
<script>
export default {
inject: ['nameFromParent', 'getReaciveNameFromParent'],
computed: {
reactiveNameFromParent () {
return this.getReaciveNameFromParent()//子孙组件里面调用这个函数
}
},
watch: {
'reactiveNameFromParent': function (val) {
console.log('来自Parent组件的name值发生了变化', val)//监听数据变化
}
},
mounted () {
console.log(this.nameFromParent, 'nameFromParent')
}
}
</script>