Vue中组件之间传值的六种方式(完整版)

2025-03-28 02:50

本文主要是介绍Vue中组件之间传值的六种方式(完整版),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式...

前言

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:

Vue中组件之间传值的六种方式(完整版)

如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。

针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式,如 props$emit/$on、vuex、$parent / $children$attrs/$listeners 和 provide/inject,以通俗易懂的实例讲述这其中的差别及使用场景,希望对小伙伴有些许帮助。

方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:["Henry","Bucky","Emily"]

	//App.vue父组件
	<template>
	  <div id="app">
	    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
	  </div>
	</template>
	<script>
	import Users from "./components/Users"
	export default {
	  name: 'App',
	  data(){
	    return{
	      users:["Henry","Bucky","Emily"]
	    }
	  },
	  components:{
	    "users":Users
	  }
	}
//users子组件
	<template>
	  <div class="hello">
	    <ul>
	      <li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
	    </ul>
	  </div>
	</template>
	<script>
	export default {
	  name: 'HelloWorld',
	  props:{
	    users:{           //这个就是父组件中子标签自定义名字
	      type:Array,
	      required:true
	    }
	  }
	}
	</script>

总结:父组件通过 props 向下传递数据给子组件。注:组件中的数据共有三种形式:datapropscomputed

2.子组件向父组件传值(通过事件形式)

接下来我们通过一个例子,说明子组件如何向父组件传递值:当我们点击 “Vue.js Demo” 后,子组件向父组件传递值,文字由原来的“传递的是一个值”变成“子向父组件传值”,实现子组件向父组件值的传递。

Vue中组件之间传值的六种方式(完整版)

	// 子组件
	<template>
	  <header>
	    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
	  </header>
	</template>
	<script>
	export default {
	  name: 'app-header',
	  data() {
	    return {
	      title:"Vue.js Demo"
	    }
	  },
	  methods:{
	    changeTitle() {
	      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
	    }
	  }
	}
	</script>
// 父组件
	<template>
	  <div id="app">
	 	//与子组件titleChanged自定义事件保持一致
	    <app-header v-on:titleChanged="updateTitle" ></app-header>
		// updateTitle($event)接受传递过来的文字
	    <h2>{{title}}</h2>
	  </div>
	</template>
	<script>
	import Header from "./components/Header"
	export default {
	  name: 'App',
	  data(){
	    return{
	      title:"传递的是一个值"
	    }
	  },
	  methods:{
	    updateTitle(e){   //声明这个函数
	      this.title = e;
	    }
	  },
	  components:{
	   "app-header":Header,
	  }
	}
	</script>

总结:子组件通过 events 给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。

方法二、$emit/$on

这种方法通过一个空的 Vue 实例作为China编程中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。  当我们的项目比较大时,可以选择更好的状态管理解决方案 vuex。

1. 具体实现方式:

	var Event=new Vue();
	Event.$emit(事件名,数据);
	Event.$on(事件名,data => {});

2. 举个例子

假设兄弟组件有三个,分别是 A、B、C 组件,C 组件如何获取 A 或者 B 组件的数据。

<div id="itany">
	    <my-a></my-a>
	    <my-b></my-b>
	    <my-c></my-c>
	</div>
	<template id="a">
	  <div>
	    <h3>A组件:{{name}}</h3>
	    <button @click="send">将数据发送给C组件</button>
	  </div>
	</template>
	<template id="b">
	  <div>
	    <h3>B组件:{{age}}</h3>
	    <button @click="send">将数组发送给C组件</button>
	  </div>
	</template>
	<template id="c">
	  <div>
	    <h3>C组件:{{name}},{{age}}</h3>
	  </div>
	</template>
	<script>
	var Event = new Vue();//定义一个空的Vue实例
	var A = {
	    template: '#a',
	    data() {
	      return {
	        name: 'tom'
	      }
	    },
	    methods: {
	      send() {
	        Event.$emit('data-a', this.name);
	      }
	    }
	}
	var B = {
	    template: '#b',
	    data() {
	      return {
	        age: 20
	      }
	    },
	    methods: {
	      send() {
	        Event.$emit('data-b', this.age);
	      }
	    }
	}
	var C = {
	    template: '#c',
	    data() {
	      return {
	        name: '',
	        age: ""
	      }
	    },
	    mounted() {//在模板编译完成后执行
	     Event.$on('data-a',name => {
	         this.name = name;//箭头函数内部不会产生新的this,这边如果不用=>,this指代Event
	     })
	     Event.$on('data-b',age => {
	         this.age = age;
	     })
	    }
	}
	var vm = new Vue({
	    el: '#itany',
	    components: {
	      'my-a': A,
	      'my-b': B,
	      'my-c': C
	    }
	});    
	</script>

Vue中组件之间传值的六种方式(完整版)

$on 监听了自定义事件 data-a 和 data-b,因为有时不确定何时会触发事件,一般会在 mounted 或 created 钩子中来监听。

方法三、vuex

Vue中组件之间传值的六种方式(完整版)

1.简要介绍 Vuex 原理

Vuex 实现了一个单向数据流,在全局拥有一个 State 存放数据,当组件要更改 State 中的数据时,必须通过 Mutation 进行,Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action,但 Action 也是无法直接修改 State 的,还是需要通过 Mutation 来修改 State 的数据。最后,根据 State 的变化,渲染到视图上。

2.简要介绍各模块在流程中的功能:

  • Vue ComponentsVue组件html页面上,负责接收用户操作等交互行为,执行 dispatch 方法触发对应 action 进行回应。
  • dispatch:操作行为触发方法,是唯一能执行 action 的方法。
  • actions:操作行为处理模块,由组件中的 $store.dispatch('action 名称', data1) 来触发。然后由 commit() 来触发 mutation 的调用 , 间接更新 state。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行,包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装,以支持 action 的链式触发
  • commit:状态改变提交操作方法。对 mutation 进行提交,是唯一能执行 mutation&nbChina编程sp;的方法。
  • mutations:状态改变操作方法,由 actions 中的 commit('mutation 名称') 来触发。是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些 hook 暴露出来,以进行 state 的监控等。
  • state:页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
  • gettersstate 对象读取方法。图中没有单独列出该模块,应该被包含在了 render 中,Vue Components 通过该方法读取全局 state 对象。

3.Vuex 与 localStorage

vuex 是 vue 的状态管理器,存储的数据是响应式的。但是并不会保存起来,刷新之后就回到了初始状态,具体做法应该在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面,刷新之后,如果 localStorage 里有保存的数据,取出来再替换 store 里的 state

	let defaultCity = "上海"
	try {   // 用户关闭了本地存储功能,此时在外层加个try...catch
	  if (!defaultCity){
	    defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
	  }
	}catch(e){}
	export default new Vuex.Store({
	  state: {
	    city: defaultCity
	  },
	  mutations: {
	    changeCity(state, city) {
	      state.city = city
	      try {
	      window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
	      // 数据改变的时候把数据拷贝一份保存到localStorage里面
	      } catch (e) {}
	    }
	  }
	})

这里需要注意的是:由于 vuex 里,我们保存的状态,都是数组,而 localStorage 只支持字符串,所以需要用 JSON 转换:

	JSON.stringify(state.subscribeList);   // array -> string
	JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array 

方法四、$attrs/$listeners

1.简介

多级组件嵌套需要传递数据编程China编程时,通常使用的方法是通过 vuex。但如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点大材小用。为此 Vue2.4 版本提供了另一种方法---- $attrs/$listeners

  • $attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
  • $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

接下来我们看个跨级通信的例子:

	// index.vue
	<template>
	  <div>
	    <h2>浪里行舟</h2>
	    <child-com1
	      :foo="foo"
	      :boo="boo"
	      :coo="coo"
	      :doo="doo"
	      title="Vue中组件之间传值的六种方式(完整版)"
	    ></child-com1>
	  </div>
	</template>
	<script>
	const childCom1 = () => import("./childCom1.vue");
	export default {
	  components: { childCom1 },
	  data() {
	    return {
	      foo: "Javascript",
	      boo: "Html",
	      coo: "css",
	      doo: "Vue"
	    };
	  }
	};
	</script>
	// childCom1.vue
	<template class="border">
	  <div>
	    <p>foo: {{ foo }}</p>
	    <p>childCom1的$attrs: {{ $attrs }}</p>
	    <child-com2 v-bind="$attrs"></child-com2>
	  </div>
	</template>
	<script>
	const childCom2 = () => import("./childCom2.vue");
	export default {
	  components: {
	    childCom2
	  },
	  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在 props 声明的属性
	  props: {
	    foo: String // foo 作为 props 属性绑定
	  },
	  created() {
	    console.log(this.$attrs); 
	    // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
	  }
	};
	</script>
// childCom2.vue
	<template>
	  <div class="border">
	    <p>boo: {{ boo }}</p>
	    <p>childCom2: {{ $attrs }}</p>
	    <child-com3 v-bind="$attrs"></child-com3>
	  </div>
	</template>
	<script>
	const childCom3 = () => import("./childCom3.vue");
	export default {
	  components: {
	    childCom3
	  },
	  inheritAttrs: false,
	  props: {
	    boo: String
	  },
	  created() {
	    console.log(this.$attrs); 
	    // {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
	  }
	};
	</script>
	// childCom3.vue
	<template>
	  <div class="border">
	    <p>childCom3: {{ $attrs }}</p>
	  </div>
	</template>
	<script>
	export default {
	  props: {
	    coo: String,
	    title: String
	  }
	};
	</script>

Vue中组件之间传值的六种方式(完整版)

如上图所示 $attrs 表示没有继承数据的对象,格式为 {属性名:属性值}Vue2.4 提供了 $attrs , $listeners 来传递数据与事件,跨级组件之间的通讯变得更简单。

简单来说:$attrs 与 $listeners 是两个对象,$attrs 里存放的是父组件中绑定的非 Props 属性$listeners 里存放的是父组件中绑定的非原生事件

方法五、provide/inject

1.简介

Vue2.2.0 新增 API,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。一言而蔽之:祖先组件中通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量

provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

2.举个例子

假设有两个组件: A.vue 和 B.vue,B 是 A 的子组件

// A.vue
	export default {
	  provide: {
	    name: '浪里行舟'
	  }
	}
	// B.vue
	export default {
	  inject: ['name'],
	  mounted () {
	    console.log(this.name);  // 浪里行舟
	  }
	}

可以看到,在 A.vue 里,我们设置了一个 provide: name,值为 '浪里行舟',它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中,通过 inject 注入了从 A 组件中提供的 name 变量,那么在组件 B 中,就可以直接通过 this.name 访问这个变量了,它的值也是 '浪里行舟'。这就是 provide / inject API 最核心的用法。

  需要注意的是:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的----vue官方文档
所以,上面 A.vue 的 name 如果改变了,B.vue 的 this.name 是不会改变的,仍然是 '浪里行舟'

3.provide 与 inject 怎么实现数据响应式

一般来说,有两种办法:

  • provide 祖先组件的实例,然后在子孙组件中注入依赖,这样就可以在子孙组件中直接修改祖先组件的实例的属性,不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 propsmethods 等
  • 使用 2.6 最新 API Vue.observable 优化响应式 provide (推荐)

我们来看个例子:孙组件 D、E 和 F 获取 A 组件传递过来的 color 值,并能实现数据响应式变化,即 A 组件的 color 变化后,组件 D、E、F 会跟着变(核心代码如下:)

Vue中组件之间传值的六种方式(完整版)

// A 组件 
	<div>
	      <h1>A 组件</h1>
	      <button @click="() => changeColor()">改变color</button>
	      <ChildrenB />
	      <ChildrenC />
	</div>
	......
	  data() {
	    return {
	      color: "blue"
	    };
	  },
	  // provide() {
	  //   return {
	  //     theme: {
	  //       color: this.color //这种方式绑定的数据并不是可响应的
	  //     } // 即A组件的color变化后,组件D、E、F不会跟着变
	  //   };
	  // },
	  provide() {
	    return {
	      theme: this//方法一:提供祖先组件的实例
	    };
	  },
	  methods: {
	    changeColor(color) {
	      if (color) {
	        this.color = color;
	      } else {
	        this.color = this.color === "blue" ? "red" : "blue";
	      }
	    }
	  }
	  // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
	  // provide() {
	  //   this.theme = Vue.observable({
	  //     color: "blue"
	  //   }android);
	  //   return {
	  //     theme: this.theme
	  //   };
	  // },
	  // methods: {
	  //   changeColor(color) {
	  //     if (color) {
	  //       this.theme.color = color;
	  //     } else {
	  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
	  //     }
	  //   }
	  // }
// F 组件 
	<template functional>
	  <div class="border2">
	    <h3 :style="{ color: this.theme.color }">F 组件</h3>
	  </div>
	</template>
	<script>
	export default {
	  inject: ["theme"]
	  // inject: {
	  // 	theme: {
	  // 		from: theme,
	  // 		//函数式组件取值不一样
     	  // 		default: () => ({})
	  // 	}
	  // }
	};
	</script>

虽说 provide 和 inject 主要为高阶插件/组件库提供用例,但如果你能在业务中熟练运用,可以达到事半功倍的效果!

方法六、$parent/$children 与 ref

  • ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
  • $parent / $children:访问父 / 子实例
    需要注意的是:这两种都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据。我们先来看个用 ref 来访问组件的例子:
	// component-a 子组件
	export default {
	  data () {
	    return {
	      title: 'Vue.js'
	    }
	  },
	  methods: {
	    sayHello () {
	      window.alert('Hello');
	    }
	  }
	}

不过,这两种方法的弊端是,无法在跨级或兄弟间通信。

	// parent.vue
	<component-a></componChina编程ent-a>
	<component-b></component-b>
	<component-b></component-b>
  • 我们想在 component-a 中,访问到引用它的页面中(这里就是 parent.vue)的两个 component-b 组件,那这种情况下,就得配置额外的插件或工具了,比如 Vuex 和 Bus 的解决方案。

    总结

    常见使用场景可以分为三类:

  • 父子通信:
    父向子传递数据是通过 props,子向父是通过 events($emit);通过父链 / 子链也可以通信($parent/$children)ref 也可以访问组件实例;provide/inject API;$attrs/$listeners

  • 兄弟通信:
    Bus;Vuex

  • 跨级通信:
    Bus;Vuex;provide/inject API、$attrs/$listeners

以上就是Vue中组件之间传值的六种方式(完整版)的详细内容,更多关于Vue组件传值的资料请关注China编程(www.chinasem.cn)其它相关文章!

这篇关于Vue中组件之间传值的六种方式(完整版)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:http://www.cppcns.com/wangluo/javascript/705776.html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1153975

相关文章

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进