vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道。基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好。
vue常用的传值方式以及方法有:
1. 父值传子(props)
1-1:解决一个项目中遇到的问题,父组件给子组件传值第一次子组件是可以接受的,
但是在父组件中这个值改变了,在子组件中这个prop的值还是第一次父组件传给的值。
2. 子值传父($emit) == 子调用父方法($emit):此方法较为常用。
3. 子调用父方法(props)== 子传父值:此方法不常见。
4. 父主动获取子方法以及数据($refs)
5. 子主动获取父方法以及数据:一种方法就是父先把值,方法通过props传给子,然后子在用即可,此法同3。这里讲另外方法一个方法。
6. 非父子 (eventBus)
7. vuex传值
补充:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
详细示例:
1. 父组件向子组件进行传值
父组件:
<template><div>父组件:<input type="text" v-model="name"><!-- 引入子组件 --><child :inputName="name"></child></div> </template> <script> import child from "./child"; export default {components: {child},data() {return {name: ""};} }; </script>
子组件:
<template><div>子组件:<span>{{inputName}}</span></div> </template> <script> export default {// 接受父组件的值props: {inputName: String,required: true} }; </script>
1-1:子组件接受props的值一次后,任父组件传的值怎么变,子组件就不变了。
解决方法:用一个中间值,页面绑定这个中间值。观察props值得变化->变化后把新值赋值给中间值。这样就同步了
<template><input type="text" v-model="currentValue" @change="change" /> </template> <script> export default {data() {return {// 中间值来承接父组件传过来的值currentValue: this.value,other:{},};},props: {value: {//父传过来的值type: String}},watch: {value(val) {// value变换赋值给currentValuethis.currentValue = val;},other: {//深度观察对象handler(val) {},deep: true}},methods: {} }; </script>
2. 子组件向父组件传值 -> 是通过方法传递的,也相当于子组件调用父组件方法。
父组件:
<template><div>父组件:<span>{{name}}</span><!-- 引入子组件 定义一个on的方法监听子组件的状态--><child v-on:onChildByValue="childByValue"></child></div> </template> <script> import child from "./child"; export default {components: {child},data() {return {name: ""};},methods: {childByValue: function(childValue) {// childValue就是子组件传过来的值this.name = childValue;}} }; </script>
子组件:
<template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type="button" value="点击触发" @click="childClick"></div> </template> <script> export default {data() {return {childValue: "我是子组件的数据"};},methods: {childClick() {// childByValue是在父组件on监听的方法// 第二个参数this.childValue是需要传的值this.$emit("onChildByValue", this.childValue);}} }; </script>
3. 子调用父方法:
父组件:
<template><editor :onSubmit="cccc"></editor> </template> <script> export default {//省略了引入注册等代码methods: {cccc: function (str) {alert(str)}} } </script>
子组件:
<template><button @click="submit">提交</button> </template> <script> export default {props: {onSubmit: {//父组件把方法传过来type: Function,default: null}},methods: {submit: function () {if (this.onsubmit) {// 调用父方法也相当于通过方法传值了this.onsubmit('传给父组件ok')}}} } </script>
4. 父主动获取子方法以及数据
1. 调用子组件的时候 定义一个ref
<child ref="headerChild"></child>
2. 在父组件里面通过
this.$refs.headerChild.属性this.$refs.headerChild.方法
5. 子主动获取父方法以及数据
在子组件里面通过以下方法获取,获取不到数据可以输出this.$parent看看数据是什么样的,有时候得通过this.$parent.$parent.属性 ...
用此方法前提得知道父组件有没有,如果有?是谁,不推荐用这个方法,如果组件嵌套过多就比较麻烦。
this.$parent.属性this.$parent.方法
6. 非父子组件进行传值(不推荐平行组件相互传值,能避免就避免)
a: 方法一:如果相互传值的组件都公有一个父组件的话,共同父组件中设定一个data用于储存你要传递的数据,
然后两个子组件都通过props连接父组件的这个data,实现一个三方同步。
b: 方法二:通过url,缓存来传数据,这个得看组件间怎么设计的。
c: 方法三:event bus,vue2.0里面的event bus(其实就是个发布订阅模式):
可以在main.js里面设置全局方法:window.eventBus = new Vue();
组件A:订阅方法。
<template><div>A组件:<input type="button" value="点击触发" @click="getData"><span>{{name}}</span></div> </template> <script> export default {data () {return {name: 0}},methods: {getData: function () {this.name++},showLog: function (){console.log('调用了A组件方法')}}mounted: function () {var that = this// 用$on事件来接收eventBus.$on('sendEvent', function(data){// 在这里处理数据或者调用要执行的方法console.log(data)that.name = data;that.showLog();})}, }
组件B:调用方法
<template><div>B组件:<span>{{elementValue}}</span><input type="button" value="点击触发" @click="elementByValue"></div> </template> <script> export default {data() {return {elementValue: 4};},methods: {elementByValue: function() {// 在这里触发这个让别的组件观察的方法。eventBus.$emit("sendEvent", this.elementValue);}} }; </script>
7.vuex传值:只需要在相应组件改变,以及监听变化就可以。
<template><div><el-button @click="change">change</el-button>{{this.$store.state.sendData}}{{getSendData}}</div> </template><script> export default {data() {return {};},computed: {getSendData(){return this.$store.state.sendData;},},watch: {//观察数据变化,执行相应的方法getSendData(val,oldval){console.log(val);}, },methods: {change(){this.$store.commit("newSendData", this.$store.state.sendData+1);}},mounted() {} }; </script>
基本上所有的方法都在这里了,有问题可以留言。
vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全相关推荐
- php页面之间传值_php如何在不同页面之间传值
php在不同页面之间传值的方法:1.利用post传值:2.利用get传值:3.利用session传值.session是全局变量的一种,经常用于用户登录后保存用户id之类的常用数据,选择session是 ...
- vue组件通信案例练习(包含:父子组件通信及平行组件通信)
文章目录 一.案例概述 二.代码 准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现 案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
- vue父子组件之间的传值,及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
- vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...
一.父子组件传值 要点1:父组件赋予子组件属性值,子组件通过props 来接收值. 要点2:父组件可以通过 子组件对象($ref),来调用子组件的属性以及方法 要点3:子组件通过$emit 来调用父组 ...
- Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
- vue父子组件之间传值的方法
vue父子组件之间传值的方法 一.基本父子传值 父传子 方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用 父组件代码: <template>< ...
- Vue中,一个组件调用其他组件的方法(非父子组件)
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
- Vue中父子组件之间传值 ,兄弟组件之间传值(两种方法)
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
- vue父子组件传值的方法总结
一,父向子传值 1.通过props 使用技巧: 子组件内, props定义变量, 在子组件使用变量 父组件内, 使用子组件, 属性方式给props变量传值 注意事项: 父组件的数据发生了改变,子组件会 ...
最新文章
- Linux进程间通信中的文件和文件锁
- Ajax设置自定义请求头的两种方法
- EL调用java方法
- C学习杂记(二)笔试题:不使用任何中间变量如何将a、b的值进行交换
- pat 1085 Perfect Sequence (25) 二分查找
- pythonxlwt行居中_python3-xlwt-Excel设置(字体大小、颜色、对齐方式、换行、合并单元格、边框、背景、下划线、斜体、加粗)...
- linux arm ffmpeg configure文件,ffmpeg库的交叉编译记录
- 移动端跨平台开发框架对比分析
- 四层和七层负载均衡的区别介绍(转载)
- mfc在调整界面时左边的控件会丢失_Qt项目中如何完成一个漂亮的界面
- matlab中低通滤波器的用法,matlab中低通滤波器
- golang 读写 xlsx 文件
- Excel——检查单元格是否包含文本(不区分大小写)
- 三种内存虚拟化技术(内存全虚拟化、内存半虚拟化、内存硬件辅助虚拟化),以及查看linux对ETP和VPID的支持情况
- APN PDP PPP解释
- Windows上实现iOS APP自动化测试:tidevice + WDA + airtest
- 计算机体系结构期末重点,计算机系统结构期末重点题目及考点
- 电脑开启后,进入桌面黑屏,任务管理器可以用(排除是硬件问题)
- [转] Julia 高性能动态编程语言入门
- Python科学计算-Numpy和Pandas学习笔记(二)-Numpy的基本运算(chaochao`s Blog)