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從服務器獲取數據）。