Vue组件间的数据通信

1|0props配置项

  • 功能：让组件接受外部传来的数据

    • 传递数据：
      <Demo name="xxx"></Demo>
    • 接受数据：
      • 只接受
        props: ["name"],
      • 限制类型接受
        props: {
  name: String,
},
      • 限制类型，必要性限制，指定默认值接受
        props: {
  name: {
    type: String,
    required: true,
    default: "胡先森"
  },
},

  • 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确定需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

2|0组件的自定义事件

  • 一种组件间通信的方式，适用于：子组件===>父组件

  • 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

  • 绑定自定义事件

    • 在父组件中

      <Student @myClick="test"></Student>或者<Student v-on:myClick="test"></Student>

    • 在父组件中

      <Student ref="student"></Student>
...

      mounted() {
  this.$refs.student.$on("myClick", this.test);
}

    • 若想让自定义事件只能触发一次，可以使用once修饰符，或者$once方法

  • 触发自定义事件：this.$emit("myClick", params)

  • 解绑自定义事件：this.$off("myClick")

  • 组件上也可以绑定原生DOM事件，需要使用native修饰符，特别是在使用了element-ui组件时，定义的事件一般都是用native修饰。

  • 注意：通过this.$refs.student.$on("myClick", this.test)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

3|0全局事件总线（GlobalEventBus）

  • 一种组件间通信的方式，适用于任意组件间的通信

  • 安装全局事件总线(main.js)：

    new Vue({
  ...
  beforeCreate() {
    // 安装全局事件总线，$bus就是当前应用的VM
    Vue.prototype.$bus = this;
  },
  ...
})

  • 使用全局事件总线：

    • 接受数据：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调函数留在A组件中
      methods: {
  demo(data) {...},
},
mounted() {
  this.$bus.$on("xxx", this.demo)
}
    • 提供数据
      this.$bus.$emit("xxx", params)

  • 最好在beforeDestroy钩子中用$off去解绑当前组件所用到的事件

4|0消息订阅与发布（pubsub）

  • 一种组件间通信的方式，适用于任意组件间的通信。

  • 使用步骤：

    • 安装pubsub
      npm install --save pubsub-js
    • 引入
      import pubsub from "pubsub-js"
    • 接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调函数留在A组件中
      methods: {
  demo(data) {...},
},
mounted() {
  this.pubId = pubsub.subscribe("xxx", this.demo);
}
    • 提供数据
      pubsub.publish("xxx", params);

  • 最好在beforeDestroy钩子中用

    pubsub.unsubscribe(this.pubId);

    去解绑当前组件所用到的事件

5|0插槽
  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
  • 分类：默认插槽、具名插槽、作用域插槽
    -使用方式：
    • 默认插槽：
      • 父组件：
        <Category>
  <div>html结构</div>
</Category>
      • 子组件：
        <template>
  <div>
    <!-- 定义插槽 -->
    <slot>一些描述内容</slot>
  </div>
</template>
    • 具名插槽：
      • 父组件：
        <Category>
  <template slot="center">
    <div>html结构</div>
  </template>
  <template slot="footer">
    <div>html结构</div>
  </template>
</Category>
      • 子组件：
        <template>
  <div>
    <!-- 定义插槽 -->
    <slot name="center">一些描述内容</slot>
    <slot name="footer">一些描述内容</slot>
  </div>
</template>
    • 作用域插槽：

      • 理解：数据在组件自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      • 具体实现：

        • 父组件：
          <Category>
  <template scope="dataset">
    <ul>
      <li v-for="(game, index) in dataset.games" :key="index">{{game}}</li>
    </ul>
  </template>
  <template scope="dataset">
    <ol>
      <li v-for="(game, index) in dataset.games" :key="index">{{game}}</li>
    </ol>
  </template>
</Category>
        • 子组件：
          <template>
  <div>
    <!-- 定义插槽 -->
    <slot :games="games">一些描述内容</slot>
  </div>
</template>

          <script>
  export default {
    name: "Category",
    props: ["title"],
    data() {
      return {
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
      }
    },
  }
</script>

6|0Vuex（可参考博主的Vuex的使用及map方法）

  • 概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信

  • 使用场景：多个组件需要共享数据

  • 搭建Vuex环境

    • 创建文件：src/store/index.js
      // 该文件用于创建Vuex中最为核心的store
// 引入Vuex
import Vue from 'vue'
// 引入Vuex插件
import Vuex from "vuex"
Vue.use(Vuex)
// 准备actions--用于响应组件的动作
const actions = {}
// 准备mutations--用于操作数据（state）
const mutations = {}
// 准备state--用于存储数据
const state = {}

const store = new Vuex.Store({
  actions,
  mutations,
  state,
})

export default store;
    • 在main.js中创建vm时传入store配置项
      // 引入创建的store
import store from "./store"

new Vue({
  el: '#app',
  render: h=>h(App),
  // 使用store
  store,
  ...
})

  • 具体使用

    • 组件使用
      methods: {
  add() {
    this.$store.dispatch("add", params);
  },
  ...
}
    • src/store/index.js配置
      // 准备actions--用于响应组件的动作
const actions = {
  add(context, value) {
    context.commiit("ADD", value);
  },
  ...
}
// 准备mutations--用于操作数据（state）
const mutations = {
  ADD(state, value) {
    state.sum += value;
  },
  ...
}
// 准备state--用于存储数据
const state = {
  sum: 0,
  ...
}

__EOF__

本文作者：xsha_h
本文链接：https://www.cnblogs.com/aitiknowledge/p/15930121.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   xsha_h  阅读(137)  评论(0)  编辑  收藏  举报
相关博文：
·  Vuex的使用及map方法
·  Vue的路由使用及参数接受
·  Vue2 组件间通讯
·  2_Vue中组件通信的几种方式
·  【Vue2】组件通信的方式，命名规范
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae