vue2通信方法(最全)

news2024/11/15 9:30:21

前言

数据传递是框架的核心要素之一,也是在业务开发中极其重要的技术.熟练掌握所有的通信方法,是开发者必须具备的技能。

这篇文章我将会把vue2所有的通信的方法都形成简单易懂的demo。

在我的分类中,通信方法有两种大类型:

1.vue框架提供的通信方法

2.插件及其他通信方法

一.vue框架提供的通信方法:

1.props通信

props通信方法可以实现父组件向子组件传递参数,也可以实现子组件给父组件传递参数.

父传子:传递常规变量

子传父:传递函数

父组件
<template>
  <div>
    <p>父组件数字值1:{{ numValue1 }} <el-button @click="addNum">增加</el-button></p>
    <p>获取子组件的值:{{ numValue2 }}</el-button></p>
    <hr />
    <PropsChild :numValue1="numValue1" :numValue2="getChildValue"></PropsChild>
  </div>
</template>
<script>
import PropsChild from './child.vue'
export default {
  name: 'propsTest',
  components: {
    PropsChild
  },
  data() {
    return {
      numValue1: 0,
      numValue2: '父组件默认的值'
    }
  },
  methods: {
    addNum() {
      this.numValue1++
    },
    getChildValue(childValue) {
      console.log(childValue, '???子组件的数值')
      this.numValue2 = childValue

    },
    getChildValueFun() {

    }
  }
}
</script>
<style lang="less"></style>
子组件
<template>
    <div>
      子组件
      <el-input v-model="value" @input="changeValue"></el-input>
    </div>
  </template>
  <script>
    export default{
      name:'emitChild',
      data(){
        return{
          value:'子组件默认的值'
        }
      },
      methods:{
        changeValue(){
          this.$emit('getChildValue',this.value)
        }
      }
    }
  </script>
  <style lang="less">
  
  </style>
效果:

2.emit通信(自定义事件)

父组件
<template>
  <div>
    父组件
    <el-input v-model="value"></el-input>
    <hr>
    <EmitChild @getChildValue="getChildValue"></EmitChild>
  </div>
</template>
<script>
import EmitChild from './child.vue'
  export default{
    name:'emitTest',
    data(){
      return{
        value:'父组件默认的值'
      }
    },
    components:{
        EmitChild
    },
    methods:{
      getChildValue(childValue){
         this.value = childValue
      }
    }
  }
</script>
<style lang="less">

</style>
子组件
<template>
    <div>
      子组件
      <el-input v-model="value" @input="changeValue"></el-input>
    </div>
  </template>
  <script>
    export default{
      name:'emitChild',
      data(){
        return{
          value:'子组件默认的值'
        }
      },
      methods:{
        changeValue(){
          this.$emit('getChildValue',this.value)
        }
      }
    }
  </script>
  <style lang="less">
  
  </style>
效果

3.evenBus(全局事件总线) 

main.js安装事件总线

new Vue({
  router,
  store,
  axios,
  //配置事件总线
  beforeCreate(){
    Vue.prototype.$bus = this
  },
  render: h => h(App),
}).$mount('#app')
任意组件1:
<template>
    <div>
        <p>子组件1</p>
        <p>子组件1的值:{{ value1 }} <el-button @click="addNum">增加</el-button></p>
        <p>来自子组件2的值:{{ value2 }}</p>
    </div>
</template>    
<script>
 export default{
    name:'child1',
    data(){
        return{
          value1:0,
          value2:100
        }
    },
    created(){
        this.$eventBus.$on('bus_deleteNum',this.changeValue2)
    },
    methods:{
        addNum(){
            this.value1++
            this.$eventBus.$emit('bus_addNum',this.value1)
        },
        changeValue2(val){
            this.value2 = val
        }
    },
    destroyed(){
        this.$eventBus.$off('bus_deleteNum')
    }
 }
</script>
任意组件2
<template>
    <div>
        子组件2
        <p>来自子组件1的值:{{ value1 }}</p>
        <p>子组件2的值:{{ value2 }} <el-button @click="deleteNum">减少</el-button> </p>
    </div>
</template>    
<script>
 export default{
    name:'child2',
    data(){
        return{
            value1:0,
            value2:100
        }
    },
    created(){
        this.$eventBus.$on('bus_addNum',this.changeValue1)
    },
    methods:{
        changeValue1(value){
           this.value1 = value
        },
        deleteNum(){
            this.value2--
            this.$eventBus.$emit('bus_deleteNum',this.value2)
        }
    },
    destroyed(){
        this.$eventBus.$off('bus_addNum')
    }
 }
</script>
效果

 4.ref通信

父组件
<template>
    <div>
      <p>父组件的值:{{ value }} <el-button @click="addNum">增加</el-button> </p>
      <hr>
      <Child ref="child"></Child>
    </div>
</template>
<script>
import Child from './child.vue'
  export default{
    name:'refTest',
    components:{
        Child
    },
    data(){
        return{
          value:0
        }
    },
    methods:{
      addNum(){
        this.value++
        this.$refs.child.getValue(this.value)
    }
    }

  }
</script>
子组件
<template>
    <div>
       子组件的值{{ value }}
    </div>
</template>
<script>
  export default{
    name:'refTest',
    data(){
        return{
           value:'子组件初始化的值'
        }
    },
    methods:{
        getValue(val){
            this.value = val
        }
    }
  }
</script>
效果

 5.组件v-model通信

 v-model不仅可以在输入类型标签上实现双向数据绑定,也可以在组件上实现父子组件数据通信

父组件
<template>
  <div>
    <el-input v-model="value"></el-input>
    <hr />
    <Child v-model="value" @changeValue="changeValue"></Child>
  </div>
</template>
<script>
import Child from "./child.vue";
export default {
  name: "vModel",
  components: {
    Child,
  },
  data() {
    return {
      value: "父组件默认的值",
    };
  },
  methods: {
    changeValue(data) {
      this.value = data;
    },
  },
};
</script>
子组件
<template>
  <div>
    子组件
    <el-input v-model="inputvalue" @input="changeValue"></el-input>
  </div>
</template>
<script>
export default {
  name: "child",
  props: ["value"],
  model: {
    prop: "value",
    event: "changeValue",
  },
  data() {
    return {
      inputvalue: "子组件默认的值",
    };
  },
  create() {
    //子组件初始化同步,注释掉则为默认值
    // this.inputvalue = this.value;
  },
  methods: {
    changeValue(val) {
      this.$emit("changeValue", val);
    },
  },
  watch: {
    value: function (newVal) {
      this.inputvalue = newVal;
    },
  },
};
</script>
 效果

父子组件数据同步

6.sync修饰符通信

sync修饰符也是一种语法糖,也可以实现父子通信

父组件
<template>
  <div>
    <div>sync模块</div>
    <el-input v-model="value"></el-input>
    <hr />
    <Child :value.sync="value" @changeVal="changeVal"></Child>
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  name: "sync",
  components: {
    Child,
  },
  data() {
    return {
      value: "父组件默认的值",
    };
  },
  methods: {
    changeVal(val) {
      this.value = val;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
子组件
<template>
  <div>
    <p>子组件</p>
    <el-input v-model="childValue" @input="changeVal"></el-input>
  </div>
</template>

<script>
export default {
  name: "child",
  props: ["value"],
  data() {
    return {
      childValue: "子组件默认的值",
    };
  },
  methods: {
    changeVal() {
      this.$emit("changeVal", this.childValue);
    },
  },
  watch: {
    value: function (newVal) {
      this.childValue = newVal;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
效果

7.$attr 和 $listeners

父组件
<template>
  <div>
    <p>$attrs与$listeners</p>
    <p>title的值:<el-input class="inputBox" v-model="title"></el-input></p>
    <p>数值1:<el-input class="inputBox" v-model="value1"></el-input></p>
    <p>数值2:<el-input class="inputBox" v-model="value2.value"></el-input></p>
    <p>数字值:{{ num }}</p>
    <hr />
    <Child
      :title="title"
      :value1="value1"
      :value2="value2"
      v-on="$listeners"
      @changeNum="changeNum"
    ></Child>
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  name: "AttrListen",
  components: {
    Child,
  },
  data() {
    return {
      title: "标题",
      value1: "数值1",
      value2: {
        value: "对象字段2",
      },
      num: 0,
    };
  },
  mounted() {},
  methods: {
    changeNum() {
      this.num++;
    },
  },
};
</script>

<style lang="less" scoped>
.inputBox {
  width: 300px;
}
</style>
子组件
<template>
  <div>
    <p>子组件</p>
    <p>title的值:{{ $attrs.title }}</p>
    <p>数值1:{{ $attrs.value1 }}</p>
    <p>数值2:{{ $attrs.value2.value }}</p>
    <el-button @click="changeNum">修改值</el-button>
  </div>
</template>

<script>
export default {
  name: "child",
  created() {},
  methods: {
    changeNum() {
      console.log(this.$listeners, "this.$listeners的值子组件");
      //   this.$emit("changeNum");
      this.$listeners.changeNum();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
效果

8. provide和inject

可以实现上层组件对于后代组件的值传递,相当于穿透传递

祖先组件(这里使用app.vue)
<template>
  <div id="app">
    <router-view></router-view>  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
    return{
      penetrateVal:'穿透的值'
    }
  },
  components: {
  },
  created(){
  },
  methods:{
  }
}
</script>
任意后代组件
<template>
    <div>
        <p>穿透值:{{ penetrateVal }}</p>
    </div>
</template>
<script>
export default {
    name: 'prodvideAndInject',
    inject: ['penetrateVal'],
    methods: {

    }
}
</script>
<style></style>
效果

 9.作用域插槽

父组件
<template>
    <div>
        父组件
        <hr>
        <Child>
            <template slot-scope="num">
                <span>父组件中使用:{{ num.data }}</span>
            </template>
        </Child>

    </div>
</template>
<script>
import Child from './child.vue'
export default {
    name: 'slotVal',
    components: {
        Child
    },
}
</script>
子组件
<template>
    <div>
      <slot :data="num"></slot>
      <el-button @click="add">子组件中点击增加</el-button>
    </div>
   </template>
   <script>
    export default{
       name:'Child',
       data(){
        return{
            num:0
        }
       },
       methods:{
        add(){
            this.num ++
        }
       }
    }
   </script>
效果

 以上都是vue框架自带的通信方法,但是在开发业务中是不够用的,因为还需要有一些全局的通信方法,去实现业务逻辑。

二.插件和其他的通信方法

这里的一些方法就不写具体的demo和效果图了,只是做一个简单的介绍

1.vue-router

路由传参是实现参数传递的重要途径,想必是个vue开发者肯定都用过吧

传递方
this.$router.push({path:'/demo1',query:{id:1}})
接收方
console.log(this.$route.query.id)

2.vuex

这里也不细说,绝大多数vue2的项目都用vuex来做全局的一个参数存储,例如用户信息,token等等,都离不开vuex

vuex地址:Vuex 是什么？ | Vuex

3.Pinia

本质是和vuex是一样的,不过做了优化,在vue3项目中会使用的更多,也可以在vue2中使用

pinia地址:介绍 | Pinia 中文文档

4.Storage

这里是对localStroage和sessionStorage的统称,这两个都是浏览器本身的方法,都具有持久化保存的作用。最具体的就是用户token校验,判断是否登录过的时候,基本都得用Storage。

5.cookie

和Storage差不多的东西,不细说

6.redux

默认是react的配套插件,虽然没见过什么大神在vue中用redux,但是官方介绍确实可以在vue中使用redux。

我是没有操作过,想看的可以参考引用其他人的文档:Redux vue - 老白网络

 7.PubSub(万金油)

镇场子的大哥,任何框架,甚至原生都可以使用的一个经典信息传递插件,设计模式的经典之作,跨越语言的存在,别说前端了,你在redis上也都会遇到pubsub.

在使用上和eventbus像,简单好用。我就不费劲写了,直接参考别人的文档吧:一、PubSub 的Vue使用方式_vue pubsub-CSDN博客

结束语

方法有很多,但具体如何使用,看场景,看业务,灵活变通。

其实,不只是props可以实现双向传递参数,$emit和ref都是可以的,你只需要换个思路就可以了,我这里还写了一篇拓展:,使用props,emit和ref实现双向数据通信。

有兴趣的可以去看看:vue2组件通信中的一些拓展(props,emit,ref父子双向传参)-CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1229329.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

指针学习（五）

指针学习（五）

一.函数指针数组 定义&#xff1a;函数指针放进数组中&#xff0c;就叫函数指针数组&#xff0c;准确的说&#xff0c;将一个函数的地址存到⼀个数组中 那这个数组就叫函数指针数组。 int (*pi[5])(int); 解读&#xff1a;pi先和[]结合&#xff0c;因此是数组&#xff0c;加i…
阅读更多...
Leetcode—5.最长回文子串【中等】

Leetcode—5.最长回文子串【中等】

2023每日刷题&#xff08;三十五&#xff09; Leetcode—5.最长回文子串 中心扩展法算法思想 可以使用一种叫作“中心扩展法”的算法。由回文的性质可以知道&#xff0c;回文一定有一个中心点&#xff0c;从中心点向左和向右所形成的字符序列是一样的&#xff0c;并且如果字符…
阅读更多...
Threejs_04 gui调试开发

Threejs_04 gui调试开发

threejs的快捷调试工具就是这玩意&#xff0c;那么如何使用呢&#xff1f;&#xff1f; 使用gui调试开发 引入gui实例 //导入lil.gui // import * as dat from "dat.gui"; // 旧 import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";…
阅读更多...
Vatee万腾科技创新之舟：Vatee数字化力量引领未来的独特路径

Vatee万腾科技创新之舟：Vatee数字化力量引领未来的独特路径

在数字化的大潮中&#xff0c;Vatee万腾如一艘科技创新之舟&#xff0c;在未来的海洋中翱翔。vatee万腾以强大的数字化力量为桨&#xff0c;引领着行业向着新的、独特的路径前行&#xff0c;塑造着数字时代的未来。 Vatee万腾不仅仅是一家科技公司&#xff0c;更是一艘创新之舟…
阅读更多...
数据结构与算法编程题2

数据结构与算法编程题2

逆置线性表&#xff0c;使空间复杂度为 O(1) #include <iostream> using namespace std;typedef int ElemType; #define Maxsize 100 #define OK 1 #define ERROR 0 typedef struct SqList {ElemType data[Maxsize];int length; }SqList;void Init_SqList(SqList& …
阅读更多...
外贸人如何向国外客户展现我们的合作诚意

外贸人如何向国外客户展现我们的合作诚意

最近听直播&#xff0c; 一个小伙伴说自己在国外找了一个合作伙伴&#xff0c; 让他代表自己的公司和当地的客户沟通&#xff0c;然后给对方结算佣金&#xff0c;虽然对方口头答应好好的&#xff0c;但是好像做事情并不用心的样子。 比如自己之前去他们当地设展的时候邀请对方…
阅读更多...
MAX/MSP SDK学习01：Object的基本构成、创建销毁行为函数的定义、属性的赋值、以及相关注意事项

MAX/MSP SDK学习01：Object的基本构成、创建销毁行为函数的定义、属性的赋值、以及相关注意事项

Object的基本构成、创建&销毁&行为函数的定义、属性的赋值、以及相关注意事项。 #include "ext.h" // standard Max include, always required #include "ext_obex.h" // required for new style Max object// object struct&#xff0c;定义属…
阅读更多...
ruoyi-vue前后端分离版本验证码实现思路

ruoyi-vue前后端分离版本验证码实现思路

序 时隔三个月&#xff0c;再次拿起我的键盘。 前言 ruoyi-vue是若依前后端分离版本的快速开发框架&#xff0c;适合用于项目开始搭建后台管理系统。本篇文章主要介绍其验证码实现的思路。 一、实现思路简介 1、后端会生成一个表达式&#xff0c;比如1 2 ? 3&#xff0…
阅读更多...
Django 入门学习总结2

Django 入门学习总结2

通过学习&#xff0c;我们可以实现一个简单的投票系统。这个投票系统有两部分组成。 公共部分&#xff0c;公众可以查看和进行投票。管理员可以进行增加、删除、修改投票信息。 这里投票系统Python语言版本为3.10.13&#xff0c;Django Web框架版本为4.2.7。 投票系统的实现…
阅读更多...
湖科大计网：传输层

湖科大计网：传输层

一、传输层概述 一、基本概念 传输层是端到端的协议。 因特网的两种不同的传输层协议&#xff1a; TCP&#xff1a;面向连接 UDP&#xff1a;无连接 我们在学习的过程中&#xff0c;只需要关注传输层之间的通信&#xff0c;不需要关注传输层协议数据是经过路由器转发至目的网络…
阅读更多...
利用python下的matplotlib库绘制能突出显示的饼状图

利用python下的matplotlib库绘制能突出显示的饼状图

需求描述 根据已有的数据绘制一个占比图&#xff0c;期望能对其中的部分占比成分进行突出显示。 原始数据如下&#xff1a; 国外投资&#xff08;5%&#xff09;、公司投资&#xff08;8%&#xff09;、地方投资&#xff08;7%&#xff09;、中央财政&#xff08;80%&#xff…
阅读更多...
小红书软文种草怎么做，新产品上市软文创作技巧！

小红书软文种草怎么做，新产品上市软文创作技巧！

很多品牌有新品上市时都会借助软文传播来打开销路。因此&#xff0c;软文的质量几乎决定了新产品的营销结果。今天为大家分享下小红书软文种草怎么做&#xff0c;新产品上市软文创作技巧&#xff01; 一、新品上市软文撰写的三大重点 1、确定软文撰写角度 新品上市软文&#xf…
阅读更多...
使用契约的链上限价订单

使用契约的链上限价订单

我们开发了链上限价订单。 它基于一种称为契约的智能合约&#xff0c;只有在花费输出的交易满足特定条件时才可以花费输出。 为了演示其工作原理&#xff0c;我们实施了以比特币支付的 Ordinals 代币买卖限价订单&#xff0c;无需托管人。 它可以运行在任何比特币协议链上&…
阅读更多...
七,vi和vim

七,vi和vim

Linux系统会内置vi文本编辑器 Vim具有程序编辑的能力&#xff0c;可以看做是Vi的增强版本&#xff0c;可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计。代码补完、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用。 vi和vim常用的三…
阅读更多...
基因组坐标系统的 0-based 和 1-based（图文详解）

基因组坐标系统的 0-based 和 1-based（图文详解）

基因组坐标中的 “0-based” 和 “1-based” 是两种不同的规范&#xff0c;用于表示基因组上的位置。 它们在不同的上下文和文件格式中可能会有不同的使用方式。 下面我们聊聊它们间的区别和应用&#xff1a; 一、0-based 也叫做 zero-based half-open 示例 start0&#xf…
阅读更多...
Wireshark网络工具

Wireshark网络工具

Wireshark是网络包分析工具。网络包分析工具的主要作用是尝试捕获网络包&#xff0c;并尝试显示包的尽可能详细的情况。 Wireshark是一个免费开源软件&#xff0c;不需要付费&#xff0c;免费使用&#xff0c;可以直接登陆到Wireshark的官网下载安装。 在windows环境中&#x…
阅读更多...
KylinOSv10修改ulimit值

KylinOSv10修改ulimit值

问题 ulimit 值过小&#xff0c;可能导致压力测试遇到瓶颈&#xff0c;比如通过nginx建立tcp长链接时&#xff0c;链接数量受限。需要修改ulimit值&#xff0c;Linux默认为1024。 解决 使用root或sudo权限&#xff0c;编辑文件/etc/security/limits.conf&#xff0c;新增以下…
阅读更多...
龙讯旷腾PWmat发PRL：多k点计算的NAMD方法应用于小型超胞与在等效的大型超胞中进行的单个Γ点模拟之间的一致性

龙讯旷腾PWmat发PRL：多k点计算的NAMD方法应用于小型超胞与在等效的大型超胞中进行的单个Γ点模拟之间的一致性

文章信息 作者信息&#xff1a;郑帆&#xff0c;汪林望 通信单位&#xff1a;上海科技大学 中国科学院半导体所 背景导读 固态材料中的超快载流子动力学在能源材料、光电子学、传感器和量子材料等领域起着关键作用。随着超快实验技术在固态系统中载流子动力学研究中的快速发…
阅读更多...
(八)、基于 LangChain 实现大模型应用程序开发 | 基于知识库的个性化问答 (检索 Retrieval)

(八)、基于 LangChain 实现大模型应用程序开发 | 基于知识库的个性化问答 (检索 Retrieval)

检索增强生成&#xff08;RAG&#xff09;的整体工作流程如下&#xff1a; 在构建检索增强生成 (RAG) 系统时&#xff0c;信息检索是核心环节。检索是指根据用户的问题去向量数据库中搜索与问题相关的文档内容&#xff0c;当我们访问和查询向量数据库时可能会运用到如下几种技术…
阅读更多...
简单工程模式

简单工程模式

代码实现 //simpleFactory.h #ifndef _SimpleFactory_H_ #define _SimpleFactory_H_#include <iostream> #include <exception> #include <string>using namespace std;class Operation { protected:double _numberA 0;double _numberB 0; public:Operat…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023