vue2高级

vue2高级

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

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.父子组件传参

第一种：
父组件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>