關(guān)于Vue的幾個實用知識點（持續(xù)更新中……）

前言

排名不分先后，按自己習(xí)慣來的。
一、provide、inject 高級組件

總述：
provide在父組件中定義，inject 在子孫組件中定義。
provide：選項應(yīng)該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。
inject ：通常是一個字符串?dāng)?shù)組。

作用：
provide、inject實現(xiàn)父子（孫）傳值。

示例：
父組件：

<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實現(xiàn)同級傳值

總述：
首先建立一個名為Bus.js的文件，這個文件起到中轉(zhuǎn)站的作用。

// Bus.js
import Vue from 'vue'
export default new Vue()



將文件放到src文件夾下的assets文件夾下（個人喜好，我直接放到components文件夾下了，不過不推薦）。

作用：
實現(xiàn)同級傳值。

示例：

父組件：

<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) => { //監(jiān)聽自定義屬性
      console.log(data)
      vm.msg = data
    })
  }
}
</script>

<style scoped>

</style>



三、watch偵聽器

總述：
響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。

作用：
監(jiān)聽數(shù)據(jù)變化。

示例1：

變化才會觸發(fā)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配套使用，會先執(zhí)行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 // 最初綁定的時候執(zhí)行
    }

  }
}
</script>

<style scoped>

</style>



示例3：

deep深層監(jiān)聽對象屬性的變化。

<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') // 當(dāng)加入deep: true可以打印。
      },
      immediate: true, // 最初綁定的時候執(zhí)行
      deep: true // 深層監(jiān)聽
    }
  },
  // mounted () {
  //   this.obj = {
  //     one: '3'
  //   }
  // }
  // 不加deep: true時必須手動更改obj.one的值才會執(zhí)行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的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路