一 确定组件关系
二 使用第一步确定的组件关系在下面找到使用方法
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的三种通信方式的更多相关文章

  1. activemq的三种通信方式

    一.安装与启动 1.下载安装activemq,下载地址:http://activemq.apache.org/download.html. 2.安装完成后,进入其所在目录的bin目录下面,根据系统位数 ...

  2. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

  3. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  4. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  5. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  6. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  7. 应用六:Vue之父子组件间的三种通信方式

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 组件是Vue的核心功能之一,也是我们在开发过程中经常要用到的.各个独立的组件之间如何进行数据 ...

  8. Vue 常用三种传值方式

    Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...

  9. Vue的安装及使用(Vue的三种安装使用方式)

    vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库,我们 ...

随机推荐

  1. Spring-day03

    Spring集成JDBC:提供了一些方便我们使用JDBC的工具类; query(String,ResultSetHandler handler,Object..parm){ Connection co ...

  2. IEnumerable、IEnumerator、ICollection、IList、List的继承关系及简单使用

    IEnumerable和IEnumerable<T>接口在.NET中是非常重要的接口,它允许开发人员定义foreach语句功能的实现并支持非泛型方法的简单的迭代,IEnumerable和I ...

  3. Jmeter-----图形扩展监控

    Jmeter----图形扩展监控 监听器中插件安装成功如下图: 安装步骤: 1.  下载JMeterPlugins-Extras与JMeterPlugins-Standard,解压缩后在他们各自的\l ...

  4. APICloud |UIChatTools 模块demo

    UIChatTools 模块是一个聊天输入框模块,开发者可自定义该输入框的功能.通过 open 接口可在当前 window 底部打开一个输入框,该输入框的生命属于当前 window 所有.当输入框获取 ...

  5. jmeter 之系统参数根据条件修改

    背景:在setup 线程组定义了一个全局变量a:${__setProperty(a,2,)},线程组里有两个线程通过判断a的值来决定是否执行sample,线程组的最后通过beanshell sampl ...

  6. volatile有什么用?能否用一句话描述volatile的应用场景

    volatile保证内存可见性和禁止指令重排.volatile用于多线程环境下的单次操作(单次读或者单次写).volatile关键字不能提供原子性.     volatile关键字为实例域的同步访问提 ...

  7. mysql中的concat,concat_ws(),group_concat()

    mysql中的concat,concat_ws(),group_concat() 说明: 本文中使用的例子均在下面的数据库表tt2下执行:     一.concat()函数 1.功能:将多个字符串连接 ...

  8. [Javascript]网页链接加上时间戳防止串用户

    最近客服来报,一批用户访问公司网站的时候,由于其网络环境有代理服务器,导致A用户看到B用户的信息,这是非常尴尬的事情.解决的方法也很容易,给网址加上时间戳就可以了,用JS就能实现. JS代码如下 // ...

  9. SpringMVC中映射路径的用法之请求限制、命名空间

    SpringMVC中映射路径的请求限制 什么是SpringMVC请求限制? 在SpringMVC中,支持对请求的设置.如果不满足限制条件的话,就不让请求访问执行方法,这样可以大大提高执行方法 的安全性 ...

  10. python基础语法-->多项分支-->巢状分支

    # ### 多项分支 """ if 条件表达式: codel1... codel1... else 条件表达式 coedl2.. coedl2.. else 条件表达式 ...