VUE复习 组件通信、vuex

一、 常用指令：v-for,v-if,v-else,v-model
二、 绑定事件：@事件名 例如：@click
三、 绑定属性：:属性名="值"
命名一个dom元素：ref="dom元素名称"
例如： <input ref="con">

四 自定义指令：把常用的domr操作封装一起，方便复用

五、 vue绑定class和style:

1.class绑定类

     <button 
             v-for="(item,index) in typeList.tabNav"
             @click="changeCon(index)"
             :class="{ 'active': index===currentIndex  }"
         >
            {{item}}
    </button>

2.style绑定类

     <button 
          v-for="(item,index) in typeList.tabNav"
          @click="changeCon(index)"
         :style="{ 'background': index===currentIndex?'#f00':'' }"
      >
          {{item}}
     </button>

六、组件通讯

1.组件作用：是一个独立的功能单元，包含：html,css,js逻辑部分
2.通讯方式


 第一种：父传子：props

  父传子时，通常要对数据类型做验证

 第二种：子传父：通过派发自定义事件，父级接收派发的事件来实现

   子组件先派发自定义事件：$emit
   
        例如：  this.$emit('childEvent', this.childValue)

   父组件监听：@自定义事件

     <footerCom :footerCom="num" @childEvent="handleEvent"></footerCom>




 第三种：兄弟（即非父子）之间

     1)Global Bus:建立一个空的vue做为桥梁，实现兄弟组件之间的通讯 
     
     第一步：创建一个空的vue做为兄弟组件的桥梁
     
        import Vue from 'vue';
        //创建一个空的Vue作为兄弟通讯的桥梁
        let bus=new Vue();
        export default bus;
    第二步：在A,B组件分别引入公共的Bus

        //引入bus
        import Bus from '../public/bus'

    第三步：在A组件发送

      Bus.$emit('toSub',this.v)

   第四步：在B组件接收（即监听）：用$on来监听兄弟组件传过来的数据

          created() {
               // bus.$on('要监听的事件',回调函数)
               bus.$on('toSub',(v)=>{
    
                  // console.log(v)
                  this.str=v;
    
               })
            }

     7

【重点也是难点】 2)vuex：是另一个实现兄弟之间通讯的方式

， 第一点： vuex介绍： vuex官网：https://vuex.vuejs.org/zh/

 vuex 是什么 ：Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具。它采用集中式存储管理应用的所有组件的状态
 vuex适用场景：构建一个中大型单页应用
 vuex主要用于存储多个组件共享的数据(例如：登录状态，权限)，如果数据只是某个组件，则不需要vuex

第二点：如何使用vuex  

   第一步：npm install vuex --save
   第二步： 创建一个store文件夹，在其中创建一个index.js文件 ，并添加如下代码：
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
  第三步：具体使用
        1.添加state度暴露出去
            //初始要共享的数据源，相当于vue组件data中的数据
            const state={
                count:999
            }
            const store=new Vuex.Store({
                state
            });
            export default store;


        2.获取state
           在要获取的组件中，通过computed计算属性来获取到

            computed:{
              aa() {
                    return this.$store.state.count
                }
                    }
        3.通过actions,mutaitons改变statew

抛出一个问题？如何在组件中获取得到共享的数据呢？？？？？？