【转】组件之间传值/调用方法的几种方式
时间:2020-05-09
本文章向大家介绍【转】组件之间传值/调用方法的几种方式,主要包括【转】组件之间传值/调用方法的几种方式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
(一)父组件向子组件传值==props
1.在父组件中使用子组件的地方绑定数据
<children :message="message"></children>
2.子组件使用props接收父组件传过来的数据
props:{
message:String
}
3.示例:
(二)子组件向父组件传值==$emit,也可以用来调用父组件中的方法
1.子组件直接使用$emit将内部数据传递给父组件
this.$emit("childByValue",this.childValue);
2.父组件中接收数据
<template> <child @childByVlaue="childByVlaue"></dhild> </template> methods:{ childByValue:function(childValue){ this.name=childValue; } }
(三)可以通过$parent和$children获取父子组件参数
$children[i].params
this.$parent.params
(四)兄弟之间传值===Vuex
1.在state里定义数据和属性
state: {
userName: '',
},
2.在mutation里定义函数
mutations: {
setUserName(state, name) {
state.userName = name
},
},
3.设置值
this.$store.comit('setUserName',params)
4.获取值
this.$store.state.user.userName
(五)父组件调用子组件的方法===ref
1.子组件的方法
methods:{
childMethod(){
alert("我是子组件的方法");
}
}
2.父组件调用子组件的方法
<template> <child ref="child"></child> <div @click="parentMethod"></div> </template> methods:{ parentMethod(){ this.$refs.child.childMethod(); } }
原文地址:https://www.cnblogs.com/cyqdeshenluo/p/12857583.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pytorch实现查看当前学习率
- python3.x中安装web.py步骤方法
- pytorch 网络参数 weight bias 初始化详解
- PHP中单例模式的使用场景与使用方法讲解
- pytorch查看模型weight与grad方式
- php+ajax 文件上传代码实例
- PHP将整数数字转换为罗马数字实例分享
- PHP如何通过表单直接提交大文件详解
- PHP基于openssl实现的非对称加密操作示例
- python图片验证码识别最新模块muggle_ocr的示例代码
- virtualenv介绍及简明教程
- Keras 数据增强ImageDataGenerator多输入多输出实例
- TensorFlow中如何确定张量的形状实例
- 使用Dajngo 通过代码添加xadmin用户和权限(组)
- python和js交互调用的方法