vue组件间的5种传值方式
父组件向子组件传值:
比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件,完成共需四步:
父组件 Father.vue 内容,注意里面的操作步骤:
<template><div><h2>父组件区域</h2><hr /><!-- 第二步:在引用的子组件标签里定义 :num="num" , num就是要传递的变量--><Children :num="num"></Children></div>
</template><script>
// 引入子组件
import Children from "./Children.vue";
export default {data() {return {// 第一步:我们将要把变量 num 的值传给子组件Childrennum: 666,};},components: {Children,},
};
</script>
子组件 Children.vue 内容,注意里面的操作步骤:
<template><div><h2>子组件区域</h2><!-- 第四步:在子组件显示父组件传过来的值 --><i>父组件传递过了的值:{{ num }}</i></div>
</template>
<script>
export default {//第三步: 子组件可以通过定义的props就可以接收来自父组件的变量值 numprops: ["num"],data() {return {};},
};
</script>
运行效果
子组件向父组件传值:
比如有一个 Children.vue 的子组件要传值给 Father.vue 的父组件,完成共需六步:
子组件 Children.vue 内容,注意里面的操作步骤:
<template><div><h2>子组件区域</h2><!-- 第二步:得定义一个向父组件传值的方法,比如定义一个按钮,绑定一个点击事件,触发giveFather方法 --><button @click="giveFather">giveFather</button></div>
</template>
<script>
export default {data() {return {// 第一步:我们将要把变量 word 的值传给父组件word: "北极光之夜。",};},methods: {// 第三:定义子组件向父组件传值的事件方法giveFather() {// 第四步:可以通过$emit传值给父组件,第一个参数为传值的方法,第二个参数为要传递的值this.$emit("giveFather", this.word);},},
};
</script>
父组件 Father.vue 内容,注意里面的操作步骤:
<template><div><h2>父组件区域</h2><hr /><!-- 第五步:要在引用的子组件标签里定义一个自定义事件,该自定义事件要写为子组件$emit的第一个参数一样,然后双引号里的方法可以自定义,我这就为getSon --><Children @giveFather="getSon"></Children></div>
</template><script>
// 引入子组件
import Children from "./Children.vue";export default {data() {return {};},components: {Children,},methods: {//第六步:定义获取子组件值的方法,该方法的参数就为子组件传递过来的值getSon(temp) {// 控制台输出看看能不能获取console.log(temp);},},
};
</script>
运行效果
兄弟组件间传值:
比如有一个 Father.vue 的父组件,它有一个Children.vue 的子组件和一个Son.vue 的子组件,那么,Children.vue 和 Son.vue 就是兄弟关系,现在 Children.vue 要向兄弟 Son.vue 传值:
首先在vue原型上定义一个新的实例,main.js文件内容,注意里面的操作步骤:
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 第一步,在vue原型上定义一个自己的方法,一般叫$bus,为vue实例
Vue.prototype.$bus = new Vue();new Vue({render: h => h(App),
}).$mount('#app')
Children.vue 内容,注意里面的操作步骤:
<template><div><h2>Children子组件区域</h2><!-- 第三步:定义一个向兄弟组件传值的方法,比如定义一个按钮,绑定一个点击事件,触发giveSon方法 --><button @click="giveSon">giveSon</button></div>
</template>
<script>
export default {data() {return {// 第二步:我们将要把变量 word 的值传给兄弟组件word: "北极光之夜。",};},methods: {// 第四:定义子组件向兄弟组件传值的事件方法giveSon() {// 第五步:可以通过自定义的$bus的$emit传值给兄弟组件,//第一个参数为传值的方法,第二个参数为要传递的值this.$bus.$emit("giveSon", this.word);},},
};
</script>
Son.vue 内容,注意里面的操作步骤:
<template><div><h2>Son子组件区域</h2></div>
</template>
<script>
export default {data() {return {};},created() {//第六步:通过$on方法进行获取兄弟传递过来的值。//第一个参数为兄弟组件传值的方法,第二个参数是自定义的方法this.$bus.$on("giveSon", this.getSon);},methods: {//第七步,自定义的方法,参数就是兄弟传过来的值getSon(temp) {//输出看看console.log(temp);},},
};
</script
运行效果
总结就是,在vue原型上定义一个新的实例, 然后采用 emit 和emit和 on 这两个方法进行获取传递过来的值。
使用Vuex状态机传值:
Vuex是实现组件全局状态(数据)管理的一种机制,可以很方便的实现组件之间数据的共享。
关于Vuex的详细使用,可以看这篇文章,指路
vue组件间的5种传值方式相关推荐
- vue组件间通信三种基本方式
1. 父传子 父组件代码 <template><!-- 将数据通过自定义指令的方式传递给子组件 --><son :msg="message">& ...
- Vue 组件间通信几种方式(完整版)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
- vue组件间通信7种方式
vue3.0:https://mp.weixin.qq.com/s/mLiViWTnNZ_o90kAOkTQrQ vue2.X: 1. props/$emit props:props可以是数组或对象, ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- vue组件间通信方式
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. vue组件间的几种通信方式:props.$emit/$on.vuex.$paraent ...
- Vue组件间通信的几种方式
引入 用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用 一般来说,组件之间可以有几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系 ...
- vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...
- vue组件间通信传递数据的四种方式(路由传参、父子组件传参、兄弟组件传参、深层次传参)
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
- Vue 组件间通信有哪几种方式
Vue 组件间通信主要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信 1.props / $emit 适用 父子组件通信 props是父组件将值传给子组件,$emit是子组件通过派发事件 ...
最新文章
- php 對象轉換成數組,PHP錯誤:陣列對象轉換成關聯數組
- 添加序号列(SQL Server)
- html行间距1.8em,雅黑字体下WordPress 行高与字符间距最佳实践:1.8em与0.06em
- java百度地图地名定位地址_百度地图定位显示省市区街道名称,非常实用
- Shell脚本语言与编译型语言的差异
- java如何实现定时任务_Java定时任务的三种实现方式
- 实现MySQL高可用群集配置_配置高可用性的MySQL服务器负载均衡群集
- 一文读懂机器学习的常用模型评价指标
- bottomnavigationview放大两边没有_有没有什么HAPPYEND的动漫?
- Android Activity设置全屏
- java quartz job_java quartz job 执行时间配置
- Preparing transaction:done Verifying transaction:failed RemoveError:‘requests‘ is a dependency of **
- Android 仿QQ好友列表功能实现
- linux crw权限,linux中crw brw lrw等等文件属性是什么
- Tegra TX1 build tensorflow r1.1
- Spring 全家桶,永远滴神
- VS code输出框中莫名其妙的繁体字(乱码)
- 我当程序员一天,就多陪你一天吧
- JVM(1)之JVM的组成详解(字符串常量池+双亲委派机制+JIT即时编译......)
- Kylin (四) --------- Kylin 4.0 查询引擎