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

前言

排名不分先后，按自己习惯来的。
一、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()
            }
        }
    }

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路