vue2组件之间传值（数据共享）
目录
1.父组件向子组件传值
2.子组件向父组件传值：
3.子组件之间传值：
子组件之间传值第一种方法：
子组件之间传值第二种方法：
1.父组件向子组件传值
自定义属性（:属性名、props）
① 数据传递：
父组件中使用子组件时，直接绑定属性，将要传递的值通过该属性传递给子组件
<子组件名 :属性名="属性值"/> ② 数据接收：
子组件接收父组件传递过来的值，使用：props
export default {// 、、、props: ['属性名']// 、、、
}
③ 数据使用：
子组件接收到父组件传递过来的值后，直接通过props里面的属性名，使用该属性
注意：props里面接收的属性名要和 父组件使用子组件时写的传递的属性名一致
示例：
父组件 App.vue
<template><div id="app"><div>父组件</div><!-- 父组件 给 子组件 传递数据 --><props :name="name" :age="20" :sex="'女'" :foods="foods"/></div>
</template><script>//引用子组件import props from './components/props.vue';export default {name:'App',//注册组件components:{ props},data(){return{//传给子组件的值name:'张三',foods:['鱼','蛋糕'],}},}
</script>子组件 props.vue
<template><div class="props"><div>子组件</div><h4>我叫：{{name}}</h4><h4>我今年：{{age}}</h4><h4>性别：{{sex}}</h4><h4>我喜欢的食物是：</h4><ul v-for="item in foods" :key="item"><li> {{ item }} </li></ul></div>
</template><script>
export default {
name:'props',
//子组件接收父组件传递过来的值，使用：props//1.简单声明接收
props:['name','age','sex','foods']//2.接收的时候对数据进行类型限制
// props:{
// name:String,
// age:Number,
// sex:String,
// foods:[]
// }
//3.接收的时候对数据：进行类型限制 + 默认值的指定 + 必要性的限制
// props:{
// name:{
// required:true,//是否是必要传值 可不要时为 false
// type:String, //定义类型 类型 ：字符串类型、
// default:"张三" //没有传值的话 默认值 一般与 required:false 一起用
// }
// }//备注：props是只读的，如果修改了就会发出警告，想要修改就复制props中的一份，然后去data修改中的据。}
</script>页面效果：
2.子组件向父组件传值：
自定义事件(@自定义事件名、$emit)
① 数据传递：
子组件中使用 $emit 将数据传递给父组件
this.$emit('自定义事件名', '要传递的数据')② 数据接收：
父组件使用子组件时，绑定自定义事件，接收子组件传递过来的数据
<子组件名 @自定义事件名="方法名"/>methods: {方法名(val) {// val 是子组件传递过来的数据// 、、、}}
③ 数据使用：
数据转存- - -父组件中定义一个变量，将子组件传递过来的数据 转存 到 该变量，然后使用该变量
示例
父组件 App.vue
<template><div class="app"><h1>{{msg}},学生姓名是：{{studentName}}</h1><!-- 第一步 --><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 --><Student v-on:atguigu="getStudentName" /><!-- 只触发一次 --><!-- <Student @atguigu.once="getStudentName"/> --><!-- 给组件加事件的时候要加 .native --><!-- <Student v-on:atguigu="getStudentName" @click.native="show"/> --></div>
</template><script>import Student from './components/Student.vue';export default {name:'App',components:{Student},data() {return {msg:'父组件',studentName:''}},methods:{// 第四步 当多个数据传递过来的时候用 ...params 来接收getStudentName(name,...params){console.log('app收到学生名:'+name+params)this.studentName = name}},}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>子组件 Student.vue
<template><div class="student"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><!-- 第二步 --><button @click="getStudentName">传给School学生名</button></div>
</template><script>
export default {name:'Student',data() {return {name:'张三',sex:'女'}},methods:{// 第三步getStudentName(){//触发Student组件实例身上的 atguigu 事件//可以传递多个值this.$emit('atguigu',this.name,444,555)},}
</script><style scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>点击 传给School学生名 页面效果：
3.子组件之间传值：
子组件之间传值第一种方法：
EventBus(eventBus.js，emit emit，emit，on)
兄弟组件 Left.vue Right.vue 之间传递数据，例如 Left.vue 向 Right.vue 传递数据
1. 先创建一个 eventBus.js 文件，导出一个 Vue实例，内容如下：
import Vue from 'vue'export default new Vue()
2. 数据传递：
① 传递数据的组件中，导入 eventBus.js
import bus from './eventBus.js'
② 使用 $emit 传递数据
bus.$emit('自定义事件名', 传递的数据)
3. 数据接收：
① 传递数据的组件中，导入 eventBus.js
import bus from './eventBus.js'
② 使用 $on 接收数据
bus.$on('自定义事件名', val => {// ③ 数据转存 、、、
})
4. 数据使用：
数据转存- - -父组件中定义一个变量，将子组件传递过来的数据 转存 到 该变量，然后使用该变量
示例
1.在src下创建utlist文件在文件中创建eventBus.js
import vue from 'vue'export default new vue()App：
<template><div class="app"><h1>{{msg}}</h1><Student /><School/></div>
</template><script>import School from './components/School.vue';import Student from './components/Student.vue';export default {name:'App',components:{School,Student},data() {return {msg:'父组件',studentName:''}},}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>Stydent子组件 给 School 子组件 传递 数据
Stydent子组件
<template><div class="student"><h1>Student组件</h1><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><!-- 第二步 创建事件 要发送的数据 --><button @click="senName">发送学生名字</button></div>
</template><script>
//第一步：引入 创建好的js文件
import bus from '../utlis/eventBus.js'export default {name:'Student',data() {return {name:'张三',sex:'女'}},methods:{//第三步 发送数据给 eventBus.js senName(){bus.$emit('name',this.name)},}
}
</script><style scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>School 子组件
<template><div class="school"><h1>School组件</h1><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><!-- 第七步：使用数据 --><h2>学生名字：{{studentName}}</h2></div>
</template><script>
//第四步：引入 创建好的js文件
import bus from '../utlis/eventBus.js'export default {name:'School',data(){return{name:'江西软件学校',address:'南昌',//第五步 ：转存数据studentName:''}},//第六步 从 eventBus.js 接收数据created(){//注意这 要与Student写名一样为 share// 接收数据 bus.$on、val val是接收的数据bus.$on('name',val => {// 转存数据this.studentName = val})}
}
</script><style scoped>.school{background-color: aqua;padding: 5px;}</style>页效果：
点击前： 点击后：
子组件之间传值第二种方法：
1.在main.js 中添加事件
//全局事件总线 第一步beforeCreate() {Vue.prototype.$bus = this;}2. 数据传递：
① 用 this.$bus.$emit 进行数据传递
this.$bus.$emit(自定义数据,传递的数据)② 等接收完数据就要立马解绑
this.$bus.$off(自定义事件);3. 数据接收：
① 用 this.$bus.$on 进行数据接收
this.$bus.$on(自定义事件,(data)=>{}示例：
1.修改main.js文件
// 该文件时整个项目的入口文件// 引入Vueimport Vue from 'vue'// 引入App组件，是所有组件的父组件import App from './App.vue'Vue.config.productionTip = falsenew Vue({el: '#app',render: h => h(App),//全局事件总线 第一步beforeCreate() {Vue.prototype.$bus = this;}})App引用：
<template><div class="app"><h1>App</h1><School/><Student/></div>
</template><script>import School from './components/School.vue';import Student from './components/Student.vue';export default {name:'App',components:{School,Student},}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>Stydent子组件 给 School 子组件 传递 数据
Stydent子组件：
<template><div class="student"><h1>Student</h1><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><!-- 第二步 创建点击事件 --><button @click="sendStubentName">把学生名给School组件</button></div>
</template><script>
export default {name:'Student',data() {return {name:'张三',sex:'女'}},methods:{//第三步提供数据 创建hello自定义事件 传输学生名字 sendStubentName(){this.$bus.$emit('hello',this.name)}},//第四步 等接收完数据就要立马解绑事件beforeDestroy(){this.$bus.$off('hello');}
}
</script><style scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>School 子组件：
<template><div class="school"><h1>school</h1><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><!-- 第八步： 数据使用 --><h2>学生名字：{{StudentName}}</h2></div>
</template><script>
export default {name:'School',data(){return{name:'江西软件学校',address:'南昌',//第五步 ：转存数据StudentName:''}},// methods(){// // 接收数据 第二种方式（2）// demo(data);{// console.log('我是school组件，收到了数据',data);// }// },mounted(){// console.log('school',this.$on)//第六步 接收数据 hello自定义事件名 接收的的数据//接收数 第一种方式写箭头函数 this.$bus.$on('hello',(data)=>{// 第七步 把接收的数据 赋值给 StudentNamethis.StudentName = data})//接收数据 第二种方式（1）// this.$bus.$on('hello',demo)}
}
</script><style scoped>.school{background-color: aqua;padding: 5px;}</style>页效果：
点击前： 点击后：
vue2组件之间传值（数据共享）相关推荐
- Vue2 组件之间传值
组件件的传值有点复杂,我在这里记录一下哈 Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个 ...
- vue 2 组件之间传值
对vue2版本的组件之间传值的一个简单整合: 父组件 => 子组件: props 和 refs - props: { msg: String } //parent <hello-world ...
- VUE2 组件间传值
概述 常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props 子向父是通过 events( $emit ) 通过父链 / 子链也可以通信( $parent / $children ) ...
- 【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值 区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
- React组件之间传值
前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题.下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中 ...
- vue中，兄弟组件之间传值
vue中,兄弟组件之间传值 项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
- Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
- Vue - 全局组件之间传值（中间件传值）
Vue项目中全局组件之间传值(中间件传值) 一. 使用方法 二. 传值实例 一. 使用方法 创建一个中间件文件,文件名自定义 这里创建的文件为 send.js send.js 中配置 import V ...
- vue组件之间传值几种方法
方法一.父子组件传值 通过props向下传递 父组件 <div class="menu_header"><Menu :msgChild="msg1&qu ...
最新文章
- Exchage 2007 Client Application Functions（2） -- 如何收取邮件
- TF-IDF与余弦相似性的应用（一）：自动提取关键词
- AC日记——Power收集 洛谷 P3800
- Database：Database数据库的简介、类型及其区别(关系数据库VS非关系型数据库)、案例应用之详细攻略
- PHP案例 网页计数器设计
- Ubuntu 12.04 静态ip的设置方法
- java bean状态_无状态和有状态企业Java Bean
- Error:java: Compilation failed: internal java compiler error
- JAVA day13，14 API、Object类、日期时间类（long，Date，Calendar，DateFormat）、String类（字符串，可变长字符串）、正则表达式、包装类
- Oracle 中session和processes的初始设置
- android上跑脚本,光遇自动跑图脚本
- 电子计算机与媒体阅读答案,电子计算机与多媒体课课练.docx
- 读计算机网络得学五笔吗,电脑五笔打字难不难学?大约要学多久才可以掌握?
- 设计算法判断单链表的全部 n 个字符是否中心对称
- 判断浏览器的cookie是否开启
- 68个经典励志小故事|哲理小故事,让你终身受益(3)
- 自己搜的算法题2.0
- 用户体验——以用户为中心的Web设计_Chapter3. 战略层：网站目标和用户需求
- OSChina 周日乱弹 ——xslai1210生日快乐
- Linux NVMe Driver学习笔记之8：IO SQ/CQ的创建过程