vue 中一些API 或屬性的常見用法

prop

　　官方解釋：Prop 是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。

通俗點講就是：prop是父組件用來傳遞數據的一個自定義屬性。

　　　　

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發現我們能夠在組件實例中訪問這個值，就像訪問 data 中的值一樣。

一個 prop 被注冊之后，你就可以像這樣把數據作為一個自定義特性傳遞進來：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

結果如下

單向數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。（父傳子可以，子傳父不行）這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。

每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。（不能直接改props里面的值，可以定義一個屬性或者方法來接受props里面的值后再操作）

官方舉例：

1.這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2.這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

案例：prop父組件向子組件傳值

父組件：

 

<template>
  <div>
    父組件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子組件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

 

子組件：

<template>
  <div>
    子組件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父組件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

 

 

$emit  子組件向父組件傳值：自定義事件，this.$emit。

子組件：

 

<template>
  <div>
    子組件:
    <span>{{childValue}}</span>
    <!-- 定義一個子組件傳值的方法 -->
    <input type="button" value="點擊觸發" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子組件的數據'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父組件on監聽的方法
        // 第二個參數this.childValue是需要傳的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

 

父組件：

<template>
  <div>
    父組件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子組件 定義一個on的方法監聽子組件的狀態-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子組件傳過來的值
        this.name = childValue
      }
    }
  }
</script>

    以上講了父傳子，子傳父，那么非父子組件直接如何傳值呢？

　　網上搜到了這樣一個例子：vue事件總線（vue-bus）可實現非父子組件傳值

安裝

$ npm install vue-bus

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝 vue-bus：

import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

如果使用全局的 script 標簽，則無須如此（手動安裝）。

 1.公共實例文件bus.js，作為公共數控中央總線

import Vue from "vue";
export default new Vue();

 

2.在組件A中傳遞參數

import Bus from '../bus.js';
export default {
  name: 'first',
  data () {
    return {
      value: '我來自first.vue組件！'
    }
  },
  methods:{
    add(){// 定義add方法，並將msg通過txt傳給second組件
      Bus.$emit('txt',this.value);
    }
  }
}

3.在組件B中接受參數

import Bus from '../bus.js';
export default {
  name: 'first',
  data () {
    return {
      value: '我來自second.vue組件！'
    }
  },
  methods:{
    add(){// 定義add方法，並將msg通過txt傳給second組件
      Bus.$on('txt',()=>{
　　　　　　this.message=this.vue;
　　　　});
    }
  }
}

這樣，就可以在第二個非父子關系的組件中，通過第三者bus.js來獲取到第一個組件的value。

兄弟組件之間與父子組件之間的數據交互，兩者相比較，兄弟組件之間的通信其實和子組件向父組件傳值有些類似，其實他們的通信原理都是相同的，

例如子向父傳值也是$emit和$on的形式，只是沒有eventBus，但若我們仔細想想，此時父組件其實就充當了bus這個事件總線的角色。 

這種用一個Vue實例來作為中央事件總線來管理組件通信的方法只適用於通信需求簡單一點的項目，對於更復雜的情況，Vue也有提供更復雜的狀態管理模式Vuex來進行處理，請自行到官網進行學習。

 

vue router按需加載

import VueRouter from 'vue-router'

import Layout from 'components/layout'
// import Layout_2 from 'components/layout1'
import HeadTopbar from 'components/head_top_bar'
import HeadTopbar1 from 'components/head_top_bar1'
import TopBar1 from 'components/top_bar1'
import TopBar2 from 'components/top_bar2'
import TopBar3 from 'components/top_bar3'
import TopBar4 from 'components/top_bar4'
import TopBar5 from 'components/top_bar5'
//MobileApp
// 登陸模塊（按需加載,當渲染其他頁面時才加載其組件,並緩存,減少首屏加載時間）
const Login = resolve => require(['views/login'], resolve)
const LocalAllList = resolve => require(['views/MobileApp/local_all_list'], resolve)
const Administration = resolve => require(['views/MobileApp/administration'], resolve)

 

computed 和 methods  watch區別

描述

vue 中computed 和methods 在使用效果來看可以說是一樣的，但是深入看還是不一樣的。區別就在於： computed 依賴緩存， methods 卻不是。怎么理解呢？當Dom每次需要渲染computed的值，這個值已經處於緩存之中，不需要再重復的經歷一遍計算過程，只有當computed依賴的數據變量發生變化，這個計算屬性會自動更新，不需要渲染觸發。methods 的值被獲取的時候就會每次都會重新經歷一遍計算過程。

所以由此可以看出，computed和methods 的應用場景 和 計算過程的復雜程度有關， 如果計算過程復雜龐雜，而且計算屬性會被經常調用（getter），那么最好使用緩存；如果，需要的值，計算簡單，調用不頻繁，實時性比較高（存在異步請求）,會比較適合methods

computed有緩存，若相關數據未發生變化，則不調用； 
methods無緩存，需要事件才能調用它（如點擊等）； 
watch多用於數據交互頻繁的內容。（例如定時axios從服務器獲取數據）。