前言
排名不分先后，按自己习惯来的。
一、provide、inject 高级组件
总述：
provide在父组件中定义，inject 在子孙组件中定义。
provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject ：通常是一个字符串数组。
作用：
provide、inject实现父子（孙）传值。
示例：
父组件：
<template>
<div>
<Child></Child>
</div>
</template>
<script>import Child from '../components/child'
export default {
name: 'parent',
components: {
Child
},
provide: {
name: '父组件'
}
}
</script>
<style scoped>
</style>
子（孙）组件：
<template>
<div>
<button @click="cli">按钮</button>
</div>
</template>
<script>
export default {
name: 'child',
inject: ['name'],
methods: {
cli () {
console.log(this.name)
}
}
}
</script>
<style scoped>
</style>
二、Bus实现同级传值
总述：
首先建立一个名为Bus.js的文件，这个文件起到中转站的作用。
// Bus.js
import Vue from 'vue'
export default new Vue()
将文件放到src文件夹下的assets文件夹下（个人喜好，我直接放到components文件夹下了，不过不推荐）。
作用：
实现同级传值。
示例：
父组件：
<template>
<div>
<Child></Child>
<Childtwo></Childtwo>
</div>
</template>
<script>import Child from '../components/child'
import Childtwo from '../components/childtwo'
export default {
name: 'parent',
components: {
Child,
Childtwo
}
}
</script>
<style scoped>
</style>
子组件1
<template>
<div>
<button @click="cli">子组件1</button>
</div>
</template>
<script>import Bus from '../components/Bus'
export default {
name: 'child',
data () {
return {
msg: '子组件2'
}
},
methods: {
cli () {
Bus.$emit('val', this.msg) // 定义自定义属性
}
}
}
</script>
<style scoped>
</style>
子组件2
<template>
<div>
<button>{{msg}}</button>
</div>
</template>
<script>import Bus from '../components/Bus'
export default {
name: 'childtwo',
data () {
return {
msg: 'full'
}
},
mounted () {
let vm = this
Bus.$on('val', (data) => { //监听自定义属性
console.log(data)
vm.msg = data
})
}
}
</script>
<style scoped>
</style>
三、watch侦听器
总述：
响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
作用：
监听数据变化。
示例1：
变化才会触发first方法。
<template>
<div>
<p>{{full}}</p>
<p><input type="text" v-model="first"></p>
</div>
</template>
<script>
export default {
name: 'watch',
data () {
return {
first: '1',
full: ''
}
},
watch: {
first (new1) {
this.full = new1
}
}
}
</script>
<style scoped>
</style>
示例2：
handler方法、immediate配套使用，会先执行handler方法中的代码。
<template>
<div>
<p>{{full}}</p>
<p>{{last}}</p>
<p><input type="text" v-model="first"></p>
</div>
</template>
<script>
export default {
name: 'watch',
data () {
return {
first: '1',
last: '',
full: ''
}
},
watch: {
first: {
handler (new1) {
this.last = '我是首先出来的值'
this.full = new1
},
immediate: true // 最初绑定的时候执行
}
}
}
</script>
<style scoped>
</style>
示例3：
deep深层监听对象属性的变化。
<template>
<div>
<input type="text" v-model="obj.one">
</div>
</template>
<script>
export default {
name: 'watch',
data () {
return {
obj: {
one: '1',
two: '2'
}
}
},
watch: {
obj: {
handler (new1) {
console.log('change') // 当加入deep: true可以打印。
},
immediate: true, // 最初绑定的时候执行
deep: true // 深层监听
}
},
// mounted () {
// this.obj = {
// one: '3'
// }
// }
// 不加deep: true时必须手动更改obj.one的值才会执行handler方法。
}
</script>
<style scoped>
</style>
四、 局部刷新
App.vue
<template>
<div id="app">
<router-view v-if="alive"/>
</div>
</template>
<script>
export default {
name:'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
alive: true
}
},
methods: {
reload() {
this.alive= false
this.$nextTick(() => {
this.alive = true
})
}
}
}
</script>
需要局部刷新的页面
export default {
name: "hfqk",
inject: ['reload'],
methods:{
onlo(){
this.reload()
}
}
}
