Vue组件的使用

组件的复用

组件可以被复用，且复用组件的内容由每一个实例自己维护。但是复用组件的data选项必须是一个函数。

子组件向复用组件触发事件

我们在子组件中引用复用组件时，点击复用组件的按钮，我们希望能够将时间传递到复用组件中去，这时候我们需要用$emit方法传入事件，并且在复用组件的模板中使用v-on:来启动相应的方法

对于$emit方法的第二个参数,可以在复用组件里使用$event获取，当复用组件定义了相应的方法时，可以作为函数的参数使用

Vue项目v-for、v-model的使用

V-for

v-for既可以在data内的一个对象列表中循环，也可以在一个对象中循环

  1. 当作为一个对象列表循环的时候，每个对象是一个字典，字典中的内容可以作为:key的循环索引
  2. 当对一个对象进行循环的时候，会对对想的属性的内容依次循环展示（并不算有什么价值）

v-for 响应的内容更新

可以使用vm.$set(vm.items, indexOfItem, newValue)对items第i个内容进行修改，并且v-for会实时响应更新，如果是items[i]则不行

利用过滤创立新数组

可以建立以下method

methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

当进行引用的时候就使用even(numbers)来代表新数组

v-for 与 v-if 的合并使用

v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。也可以达到如上过滤效果。

V-model

v-model对数据进行动态绑定。

  1. 特别的，对于特定的小组件比如列表中的某个选项，可以通过value来绑定的值，当它被选定时就会加入数组列表之中
  2. 更特别的，对于checkbox来说，value就包含true和false

Vue项目bus与vuex的使用

为什么需要Bus

一般来说，都是利用父组件给子组件使用query或者params传递参数来实现子组件的数据显示
不过，当出现子组件需要向父组件传递数据的时候，就需要用到bus，bus可以自己创建，也可以通过装包来实现

直接创建Bus

在此处直接将Bus注入Vue对象中，成为全局的组件。
在子组件中通过this.$root.Bus.$on(key,method),this.$root.Bus.$emit(key,data)来调用
将$on放在mounted，created这些钩子函数中，相应的函数使用(e)=>{function}比较便捷 

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　

})

使用vue-bus

使用yarn或者npm安装vue-bus之后，在main.js中引用它

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

于是调用直接可以写为 this.$bus.on(key, this.method)，this.$bus.emit(key, { text: …… }
其中第一个字符串参数代表key，每个key都能够实现自己的独立传输，this.method为事先定义好的method，用于对传入的数据进行处理

为什么使用vuex

当我们的应用遇到多个组件共享状态时，会需要：

  1. 多个组件依赖于同一状态。
  2. 来自不同组件的行为需要变更同一状态。

经过我的观察，vuex在其中的作用就是组件与状态的捆绑剥离开来，使得组件状态的改变依赖于某个行为，这使得代码变得易于调试。
Vuex采用集中式存储管理应用的所有组件的状态，这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。

使用vuex

使用yarn或者npm安装vuex之后，在main.js中引用它

import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
new Vue({
  el: '#app',
  store
})

随后创建vuex目录,将store.js放在目录下,定义state和mutation

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    author: 'Wise Wrong'
  },
  mutations:{
      newAuthor(state,msg){
          state.author = msg
      }
  }
})
export default store

在使用的时候，不直接修改this.$store.state.author，而是使用this.$store.commit()来提交，可以让我们更好的跟踪每一个状态的变化，在大型项目中更为适用

Vue项目路由传参方法

query传参

父组件通过path来配置路由，用query来传递参数

    this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

此时不需要在路由配置上做手脚，直接在子组件上使用params即可，注意此时是用route来表示，而不是用router
最终效果是query传递的参数会显示在url后面的?id=上

this.$route.params.id

params传参

此时不过是用别名name来代替path，使用params代替query而已

       this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

同样的引用方式

this.$route.params.id

$router.push传参

父组件

      getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

此时需要修改router中的index.js，需要在path中添加/:id来对应 $router.push 中path携带的参数

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

同样的引用方式

this.$route.params.id

Vue项目router注意事项

项目结构

main.js

在项目中唯一new了一次Vue，实现了App.vue的挂载，以及router与Vue的关联

App.vue

项目中的最外层的一个Vue，其中的router-view代表了可以变化和跳转的部分，如果内容写在router-view之外的话就无法跳转
并暴露了App接口，用于其他文件的引用

route/index.js

用于在Vue中设置router，统一暴露所有的路由接口为router

components/HelloWorld.vue

可以使用router-link to:=””来进行路由，其中的内容可以是button或者其他组件，对于components里的组件的引用，可以使用@/components/xxx来引用