vue的三种通信方式
一 确定组件关系
二 使用第一步确定的组件关系在下面找到使用方法
1 父子通信(子组件使用父组件数据渲染)
a) 在 子组件 中添加props
props: [自定义prop名字]
b) 在子组件中把自定义prop当data使用即可
c) 找到父组件模板 中的 子组件标签,添加属性
<子组件标签 :自定义prop名字="父组件data中的数据"></子组件标签>
2 子父通信(子组件想要发送数据给父组件时)
a) 在子组件中对应的元素上绑定相关事件,在事件函数中触发自定义事件
<元素 @click="子组件methods函数"></元素>
{
methods: {
函数 () {
this.$emit('自定义事件名', 数据)
}
}
}
b) 在父组件中的methods里添加数据处理函数
{
methods: {
处理数据函数 (data) {
data就是$emit传递过来的数据
}
}
}
c) 在父组件组件模板中找到子组件标签,然后在子组件标签上绑定自定义事件
<子组件标签 @自定义事件名="第二步中创建的函数名"></子组件标签>
3 非父子通信(一个组件想要传递数据到另一个组件时)
a) 创建一个公共的实例对象
const bus = new Vue()
或者
const EventHub = new Vue()
b) 在要传递数据的组件中添加methods,并给对应元素绑定事件执行该函数
{
methods: {
函数 () {
// 触发自定义事件
bus.$emit('自定义事件名', 数据)
}
}
}
<元素 @click="函数">
c) 在要接收数据的组件中添加created,在created函数中添加监听
created () {
bus.$on('自定义事件名', (data) => {
// data就是传递来的数据
})
}
vue的三种通信方式的更多相关文章
- activemq的三种通信方式
一.安装与启动 1.下载安装activemq,下载地址:http://activemq.apache.org/download.html. 2.安装完成后,进入其所在目录的bin目录下面,根据系统位数 ...
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js 三种方式安装
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 应用六:Vue之父子组件间的三种通信方式
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 组件是Vue的核心功能之一,也是我们在开发过程中经常要用到的.各个独立的组件之间如何进行数据 ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
- Vue的安装及使用(Vue的三种安装使用方式)
vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库,我们 ...
随机推荐
- 6.3 Pandora 实操 - 数据立方
简介 数据立方是适用于大规模实时数据(每天百亿条,10TB+ 级别数据)查询与分析的数据库系统,提供交互式的访问数据的能力,支持数据过滤.分组.聚合,实现亚秒级以内对亿行级别的数据表进行多维探索分析. ...
- swust oj 983
利用二叉树中序及后序遍历确定该二叉树的先序序列 1000(ms) 10000(kb) 2606 / 4908 已知二叉树的中序和先序遍历可以唯一确定后序遍历.已知中序和后序遍历可以唯一确定先序遍历,但 ...
- Tarjan求割点 || Luogu P3388 【模板】割点(割顶)
题面:P3388 [模板]割点(割顶) 题解:无 代码: #include<cstdio> #include<iostream> #include<cstring> ...
- 报文分析6、ARP报头结构
ARP报头结构 硬件类型 协议类型 硬件地址长度 协议长度 操作类型 发送方的硬件地址(0-3字节) 源物理地址(4-5字节) 源IP地址(0-1字节) 源IP地址(2-3字节) 目标硬件地址(0 ...
- 召回率(Recall),精确率(Precision),平均正确率
https://blog.csdn.net/yanhx1204/article/details/81017134 摘要 在训练YOLO v2的过程中,系统会显示出一些评价训练效果的值,如Recall, ...
- java-方法重载、参数传递、
1.Java的方法重载overload:同一个类内,可以有多个同名的方法,只要参数不同即可(包括参数类型和个数.多类型顺序) 2.基本类型(8种:byte\short\int\long\double\ ...
- UML用例关系一览
- 数据库主库从库宕机重启后binlog数据同步
由于阿里云经典网络迁移到专用网络,一不小心没有先预备方案调整网段, 导致实例无法以内网IP形式访问数据库,被迫进行数据库停机后网络网段调整,导致宕机了几个小时...被客户各种投诉爆了.. 基于这次数据 ...
- 两个ArrayList之间求交并补
class ArraylistCalculate{ // 两个整数集求差集 public ArrayList<Integer> integerArrayListDifference( Ar ...
- python 时间戳和时间格式互相转换
#!/usr/bin/python3 # -*- coding: utf-8 -* import time def str_to_stamp(): # 转换显示格式 time1 = time.strp ...