关于Vue的几个实用知识点（持续更新中……）

梦里梦外; 2021-08-13 14:28 404阅读 0赞

## 前言 ##

排名不分先后，按自己习惯来的。

## 一、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()
                }
            }
        }