vue技术分享

一、vue组件之间的通信

1. 父组件传值给子组件 </br>

<!--父组件代码-->
<template>
  <div>
    <div  class="box">
      <h1>父组件</h1>
      <input type="text" v-model="msg"> <br>
      <div>
        <p>测试参数：{{msg}}</p>
      </div>
    </div>
    <div class="box">
      <Demo1Child :info="msg"></Demo1Child>
    </div>   
  </div>
</template>

<script>
import Demo1Child from '@/components/DemoChild'
export default {
  name: 'HelloWorld',
  components:{
    Demo1Child
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>

<!--子组件代码-->
<template>
  <div>
    <h1>子组件</h1>
    <input type="text" v-model="info"> <br>
    <p>{{info}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {  
    info: {  
      type: String,  
      default: function () {  
        return ''  
      }  
    }  
  }
}
</script>

父组件使用属性绑定的方式给子组件绑定需要给子组件传递的数据，子组件使用props接收。（子组件直接使用 input， v-model绑定props此处有坑） ==demochild1==

2. 子组件给父组件传递参数

<!--父组件代码-->
<template>
  <div>
    <div  class="box">
      <h1>父组件</h1>
      <div>
        <p>子组件传递上来的参数：{{childrenData}}</p>
      </div>
    </div>
    <div class="box">
      <DemoChild2 :info="msg" v-on:listenChildEvent="showChildData"></DemoChild2>
    </div>
  </div>
</template>

<script>
import DemoChild2 from '@/components/DemoChild2';
export default {
  name: 'HelloWorld',
  components:{
    DemoChild1,
    DemoChild2
  },
  data () {
    return {
      msg: '',
      childrenData:''
    }
  },
  methods:{
    showChildData(data){
      this.childrenData = data;
    }
  }
}
</script>

<!--子组件代码-->
<template>
  <div>
    <h1>子组件</h1>
    <input type="text" v-model="childData" @change="emitFather()"> <br>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      childData:''
    }
  },
  methods:{
    emitFather(){
      this.$emit('listenChildEvent',this.childData);
    }
  }
}
</script>

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件； </br>
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法；</br>
在父组件中注册子组件并在子组件标签上使用 v-on 对自定义事件的监听 ==DemoChild2==

3. 父子组件数据的双向通信

==prop 是单向绑定的==：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告 ==DemoChild3==

<!--父组件代码-->
<template>
  <div>
    <div  class="box">
      <h1>父组件3</h1>
      <div>
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
      </div>
    </div>
    <div class="box">
      <DemoChild3 :msg.sync="msg"></DemoChild3>
    </div>
  </div>
</template>

<script>
import DemoChild3 from '@/components/DemoChild3';
export default {
  name: 'HelloWorld',
  components:{
    DemoChild1,
    DemoChild2,
    DemoChild3
  },
  data () {
    return {
      msg: '',
      childrenData:''
    }
  },
  methods:{
    showChildData(data){
      this.childrenData = data;
    }
  }
}

<!--子组件代码-->
<template>
  <div>
    <h1>子组件3</h1>
    <input type="text" v-model="childData"> <br>
    <p>{{msg}}</p>
    <input type="button" value="点我加一下" @click="emitFather()">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      childData:''
    }
  },
  props: {  
    msg: {  
      type: String,  
      default: function () {  
        return ''  
      }  
    }  
  },
  methods:{
    emitFather(){
      this.$emit('update:msg',this.childData);
    }
  }
}
</script>

4. 非父子组件之间的通信

实现非父子组件间的通信，可以通过创建一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。

<!--bus.js-->
import Vue from 'vue';
export default new Vue;

<!--组件一-->
<template>
  <div>
    <h1>组件一</h1>
    <input type="text" v-model="message"> 
    <input type="button" value="确认传递参数" @click="bus()">
  </div>
</template>
<script>
import Bus from './bus'
export default {
  data () {
    return {
      message:'111',
    };
  },
  methods:{
    bus () {
      Bus.$emit('msg',this.message);
    }
  }
}

<!--组件二-->
<template>
  <div>
    <h1>组件二</h1>
    <p>{{message}}</p>
  </div>
</template>
<script>
import Bus from './bus'
export default {
  data () {
    return {
      message:''
    };
  },
  mounted() {
　　let self = this;
    Bus.$on('msg', (e) => {
      self.message = e
    　console.log(`传来的数据是：${e}`);
    })
  }  
}

二、vuex状态管理

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。比如：我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。

首先安装vuex插件 npm install vuex --save

State
Mutation
Getter
Action
Module

State:这个就是我们说的访问状态对象，它就单页应用中的共享值。怎么将状态对象赋值给内部对象，也就是把stroe.js中的值,赋值给模板里data中的值。一般有三种方式。

1.通过computed的计算属性直接赋值

computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

computed:{
    test(){
        return this.$store.state.count;   //store.state.count
    }
},
store

2.mapState 辅助函数——通过对象赋值

需要在组件中引入==import {mapState} from 'vuex';==

computed:mapState({
    test:function(state){
      return state.count;
    }
}),

3.mapState 辅助函数——通过数组赋值

computed:mapState(["count"])

Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。要想更改store中state的值，只能通过mutation。

1.Vuex提供了==commit==方法来修改状态

组件中这样使用commit

<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>

store.js中这样定义mutation

const mutations={
  add(state){
      state.count++;
  },
  reduce(state){
      state.count--;
  }
}

2.提交载荷（Payload）——传值

组件中这样定义传值

<button @click="$store.commit('add','this')">+</button>

store.js中这样定义mutation中的add方法

const mutations={
  add(state,test){
    state.count = test;
  },
  reduce(state){
      state.count--;
  }
}

3.模板获取mutation中的方法

需要在组件中引入 ==import {mapMutations} from 'vuex';==

组件中js代码可以这样写

methods:{
    ...mapMutations(['add','reduce']),
},

组件中的html代码可以这样写

<button @click="add('this')">+</button>

Getters：getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工

在store.js中这样写

const getters = {
    count:function(state){
        return state.count +=100;
    }
}

在组件中这样写

computed:{
    // count(){
    //     return this.$store.getters.count;
    // },
    ...mapGetters(["count"])
  }

Actions：actions和的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态