vue的逆向传值、 同胞传值、 跨组件传值、 slot 插槽

逆向传值–自定义事件

子组件 把数据传递到父组件之上
逆向传值 默认是不被允许的 我们需要借助一些其他知识来完成逆向传值（自定义事件辅助）

1.必须在子组件中通过事件来触发

<template>
  <div>
      zizizzizi
      <!-- 1.通过事件触发一个函数来完成逆向传值 -->
      <button v-on:click="fun()">点我进行逆向传值么么哒！！</button>
  </div>
</template>
<script>
export default {
    methods:{
        fun(){
         
        }
    }
}
</script>

2 在子组件的函数中 使用自定义事件（$emit）抛出要传递的数据

<template>
  <div>
      zizizzizi
      <!-- 1.通过事件触发一个函数来完成逆向传值 -->
      <button v-on:click="fun()">点我进行逆向传值么么哒！！</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            zitext:"我是子组件的数据么么哒"
        }
    },
    methods:{
        fun(){
            // 2.使用自定义事件（$emit）抛出要传递的数据
            // this.$emit("自定义事件名"，你要传递的数据)
            this.$emit("xiaoming",this.zitext)
        }
    }
}
</script>

3.在父组件中使用自定义事件 并且接受子组件的数据

<template>
  <div>
      fuffufufufufufufufuf
      <!-- 3.使用子组件的自定义事件 注意 在父组件使用自定义事件调用函数的
      时候  函数不加（）函数不加()函数不加（）函数不加()
      函数不加（）函数不加()函数不加（）函数不加()
      -->
      <Zi @xiaoming="fun"/>
  </div>
</template>

<script>
import Zi from "./zi.vue"
export default {
    components:{
        Zi
    },
    methods:{
        // 函数的形参就是刚才子组件传递的数据
        fun(val){
            console.log("父组件",val)
        }
    }
}
</script>

逆向传值—ref

详情请见下方ref绑定到组件之上

同胞传值

1.方式1

a组件逆向传值给父组件 父组件在正向传值给b组件

*2.中央事件总线eventBus

中央事件总线作用是完成同胞传值 中央事件总线eventBus就是凌驾在兄弟组件之上的一个空的vue实例 这个实例只要就是建立起了多个兄弟组件之间的数据通信桥梁

1.在src下新建文件夹与文件用来保存中央事件总线这个空的vue实例

import Vue from "vue"
export default new Vue

2.发送

<template>
  <div>
      <!-- 1.不能直接传递 必须使用事件触发一个函数来进行传递 -->
      <button v-on:click="fun()">点我把数据传递给democ</button>
      demoaaaaaaaaaaaaa
  </div>
</template>
<script>
// 2.引用中央事件总线
import eventBus from "@/eventBus"
export default {
    methods:{
        fun(){
            // 3.开始传递(给中央事件总线的上面绑定了一个自定义事件)
            eventBus.$emit("xiaoming",this.text)
        }
    },
    data(){
        return {
            text:"我是demoa的数据么么哒！！！！！"
        }
    }
}
</script>

3.接受

<template>
  <div>
      democccccccccccc--{{text}}
  </div>
</template>

<script>
// 1.引用中央事件总线
import eventBus from "@/eventBus"
export default {
    data(){
       return {
           text:""
       }
        
    },
    created(){
        // 2.接收中央事件总线身上的自定义事件
        // $on(“你监听的自定义事件名”,(自定义事件上绑定的数据)=>{})监听自定义事件
        eventBus.$on("xiaoming",(val)=>{
            console.log("democcccccc",val)

            this.text=val
        })
    }
}
</script>

跨组件传值—vuex

vue是单向数据流（数据只能从一个层级一级一级的向下或者向上传递） 在多个层级传值的时候是非常麻烦的 所以为了解决这个问题 我们可以时使用vuex来进行跨层级传值

vuex是什么

vuex 是vue中的一个状态（数据 变量）管理工具 可以通过vuex把整个项目的数据 统一的保存在里面 哪个组件用 那个组件直接就去取，简化了数据传递的方式

使用

脚手架自动创建

在创建项目的时候 选中vuex选项即可
在新建好的项目中会有一个store的文件夹 这个文件夹就是用来存放vuex的所有代码的 他就是数据仓库文件夹

手工创建

vuex属性–state数据源

在vuex中数据全部放到state中

创建数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//数据源
    text:"我是字符串",
    num:66666,
    bool:true,
    arr:[11111,22222,3333,4444],
    obj:{
      name:"xixi",
      age:18
    }
  },
  mutations: {
  },
  getters:{
  },
  actions: {
  },
  modules: {
  }
})

使用数据 this.$store.state.xxx

<template>
  <div class="about">
    <!-- 使用state数据 -->
    <h1>This is an about page---{{this.$store.state.text}}</h1>
  </div>
</template>

vuex属性–module模块

因为数据后期可能非常多 所以放在一起就会到值后期很难以维护所以我们需要用模块来进行管理
1.在store文件夹下新建文件夹 （modules） 与文件来容纳拆分的模块

let aboutm={

    state: {//数据源
        text:"我是字符串",
      
      },
      mutations: {
      },
      getters:{
      },
      actions: {
      },

}
export default aboutm

2.把模块注入到vuex中

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

Vue.use(Vuex)
// 1.引用拆分的模块
import aboutm from "./modules/aboutm.js"
import homem from "./modules/homem.js"
import hwm from "./modules/hwm.js"

export default new Vuex.Store({
  modules: {
    // 2.调用
    aboutm,
    homem,
    hwm
  }
})

3.在组件中使用的时候不要忘了点模块名 才能取出模块中的数据

<template>
  <div class="about">
    <!-- 使用state     this.$store.state.模块名.数据 -->
    <h1>This is an about page---{{this.$store.state.aboutm.text}}</h1>
  </div>
</template>

vuex属性–getters模块

getters就是vuex中的计算属性（依赖一个状态数据 当数据改变的时候 getters会重新计算这个数据并且返回计算出来之后的新结果）
getters是vuex的计算属性 他和组件的computed有啥区别？
getters就是类似于全局的计算属性 因为使用getters处理的数据 可以在任何地方都直接使用
computed类似于局部的 他只能在定义的组件内进行使用

语法：

  getters:{
          处理之后的新变量(state){
              return 你的处理逻辑
          }
      },

let aboutm={

    state: {//数据源
        text:"abcdefghijk",
       
    
      },
      mutations: {
      },
      getters:{
          newtext(state){
            return state.text.toUpperCase()
          }
      },
      actions: {
      },

}

export default aboutm

获取getters数据
this.$store.getters.数据

<template>
  <div class="about">
    <!-- 使用state     this.$store.state.模块名.数据 -->
    <h1>This is an about page---{{this.$store.state.aboutm.text}}</h1>
    <h1>转成大写了---{{this.$store.getters.newtext}}</h1>
  </div>
</template>

vuex属性–mutations数据修改

mutations的作用就是用来修改state数据的 因为在vuex中state的数据不能直接修改而是必须通过mutations来进行修改
mutations中是一个个修改方法 每一个方法就是一个修改的操作/动作
要是想触发mutations中修改的方法动作 必须通过commit()来触发
记住： 修改state的数据 必须通过commit调用mutations来进行修改
1.组件内通过commit调用修改动作

<template>
  <div class="about">
    <!-- 使用state     this.$store.state.模块名.数据 -->
    <h1>This is an about page---{{this.$store.state.aboutm.text}}</h1>
    <h1>转成大写了---{{this.$store.getters.newtext}}</h1>

    <button @click="fun()">点我修改数据</button>
  </div>
</template>
<script>
  export default{
    methods:{
      fun(){
          // this.$store.commit("你要修改的mutations的任务名",{key:你要传递的数据})
          this.$store.commit("xiaoming",{val:"haha"})
      }
    }
  }
</script>

2.在vuex中编写修改的mutations动作

let aboutm={

    state: {//数据源
        text:"abcdefghijk",
      },
      mutations: {
        xiaoming(state,payload){
            state.text=payload.val
        }
      },
      getters:{
          newtext(state){
            return state.text.toUpperCase()
          }
      },
      actions: {
      },

}

export default aboutm

vuex属性–actions异步触发器

在vuex中如果项进行异步操作（异步请求）必须在actions中进行触发
actions中是一个个的异步触发方法 每一个方法就是一个异步触发方法
actions必须通过 dispatch（）调用
1.在组件内 通过dispatch触发vuex中的异步触发器

  funb(){
        // 2.通过dispatch来调用vuex的actions异步触发器
        // this.$store.dispatch("你要用的触发器名字",{key:你要传递的数据})
        this.$store.dispatch("axioslink",{key:"/data/userlist/mockdata"})
      }

2.在vuex中创建对应的actions

   actions: {
        axioslink(context,payload){
          你的数据请求
        }
      },

slot 插槽

用来混合父组件与子组件自己的模板（就是从组件外部向组件内部中传入dom）

引子

<template>
  <div>
      fufufuffufufufuf
      <!-- 
          组件的本质是自定义标签 
          标签既可以由单标签  也可以由双标签（会在开关标签中写入内容）
          默认情况下  在组件的开关标签中插入dom内容  页面是不显示的（组件是一个完整地独立地个体 他默认情况下不允许任何内容插入）
        -->
      <Zi>
          <h1>你好么么哒</h1>
      </Zi>
  </div>
</template>
<script>
import Zi from "./zi"
export default {
    components:{
        Zi
    }
}
</script>

我就是想让这个插入的dom内容显示怎么办？

slot分

1 普通槽口slot

(1)在子组件中设置slot

<template>
  <div>
   zizizizizizizizzz
   <!-- 1.定义了一个普通槽口 -->
   <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

(2)就可以直接往设置了slot的组件中插入dom

<template>
  <div>
      fufufuffufufufuf
      <!-- 
          组件的本质是自定义标签 
          标签既可以由单标签  也可以由双标签（会在开关标签中写入内容）
          默认情况下  在组件的开关标签中插入dom内容  页面是不显示的
        -->
      <Zi>
          <h1>你好么么哒1</h1>
          <h1>你好么么哒2</h1>
          <h1>你好么么哒3</h1>
          <h1>你好么么哒4</h1>
          <h1>你好么么哒5</h1>
          <h1>你好么么哒6</h1>
      </Zi>
  </div>
</template>
<script>
import Zi from "./zi"
export default {
    components:{
        Zi
    }
}
</script>

2.具名槽口slot

具名槽口 就是带有名字的槽口 给slot槽口起个名字方便后期管理
语法：
1.定义slot

<template>
  <div> 
   <slot name="top"></slot>
   zizizizizizizizzz
   <slot name="bottom"></slot>
  </div>
</template>

<script>
export default {

}
</script>

2.使用 在dom上使用 slot属性=“你要插入槽口的名字”即可插入

<template>
  <div>
      fufufuffufufufuf
      <!-- 
          组件的本质是自定义标签 
          标签既可以由单标签  也可以由双标签（会在开关标签中写入内容）
          默认情况下  在组件的开关标签中插入dom内容  页面是不显示的
        -->
      <Zi>
          <h1 slot="top">你好么么哒1</h1>
          <h1 slot="top">你好么么哒2</h1>
          <h1 slot="top">你好么么哒3</h1>
          <h1 slot="bottom">你好么么哒4</h1>
          <h1 slot="bottom">你好么么哒5</h1>
          <h1 slot="bottom">你好么么哒6</h1>
      </Zi>
  </div>
</template>

<script>
import Zi from "./zi"
export default {
    components:{
        Zi
    }
}
</script>