Vue组件间通信方式
一.Props传递数据
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件通过props接收父组件传入的属性。
<template>
<div>
父组件:{{mny}}
<Son1 :mny="mny"></Son1>
</div>
</template>
<script>
import Son1 from "./Son1";
export default {
components: {
Son1
},
data() {
return { mny: 100 };
}
};
</script>
二.$emit使用
触发当前实例上的事件。附加参数都会传给监听器回调。子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件,父组件通过v-on接收子组件传入的方法,并接收子组件传入的参数。
<template>
<div>
父组件:{{mny}}
<Son1 :mny="mny" @input="change"></Son1>
</div>
</template>
<script>
import Son1 from "./Son1";
export default {
methods: {
change(mny) {
this.mny = mny;
}
},
components: {
Son1
},
data() {
return { mny: 100 };
}
};
</script>
子组件触发绑定自己身上的方法
<template>
<div>
子组件1: {{mny}}
<button @click="$emit('input',200)">更改</button>
</div>
</template>
<script>
export default {
props: {
mny: {
type: Number
}
}
};
</script>
同步父子组件的数据,->子组件上使用的语法糖的写法 (.sync和v-model写法),v-model和.sync的区别在于v-model触发的事件只能是input,而.sync可以自定义事件名
.sync
对一个 prop 进行“双向绑定”, 推荐以 update:myPropName
的模式触发事件取而代之,然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。
<Son1 :mny.sync="mny"></Son1>
<!-- 触发的事件名 update:(绑定.sync属性的名字) -->
<button @click="$emit('update:mny',200)">更改</button>
v-model
一个组件上的 v-model
默认会利用名为 value
的 prop 和名为 input
的事件.
<Son1 v-model="mny"></Son1>
<template>
<div>
子组件1: {{value}} // 触发的事件只能是input
<button @click="$emit('input',200)">更改</button>
</div>
</template>
<script>
export default {
props: {
value: { // 接收到的属性名只能叫value
type: Number
}
}
};
</script>
三.$parent、$children
$parent: 指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent
访问父实例,子实例被推入父实例的 $children
数组中。
$children: 当前实例的直接子组件。需要注意 $children
并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children
来进行数据绑定,考虑使用一个数组配合 v-for
来生成子组件,并且使用 Array 作为真正的来源。
<Grandson1 :value="value"></Grandson1>
<template>
<div>
孙子:{{value}}
<!-- 调用父组件的input事件 -->
<button @click="$parent.$emit('input',200)">更改</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number
}
}
};
</script>
四.$attrs、$listeners
$attrs:批量向下传入属性
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class
和 style
除外)。
<Son2 name="小明" age="10"></Son2> <!-- 可以在son2组件中使用$attrs属性,可以将属性继续向下传递 -->
<div>
儿子2: {{$attrs.name}}
<Grandson2 v-bind="$attrs"></Grandson2>
</div> <template>
<div>孙子:{{$attrs}}</div>
</template>
$listeners:批量向下传入方法
包含了父作用域中的 (不含 .native
修饰器的) v-on
事件监听器。
<Son2 name="小珠峰" age="10" @click="()=>{this.mny = 500}"></Son2>
<!-- 可以在son2组件中使用listeners属性,可以将方法继续向下传递 -->
<Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2> <button @click="$listeners.click()">更改</button>
五.Provide & Inject
依赖注入原理,provide
和 inject
主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
Provide:在父级中注入依赖数据
provide
选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
provide() {
return { parentMsg: "父亲" };
},
Inject:在任意子组件中可以注入父级数据
inject: ["parentMsg"] // 会将数据挂载在当前实例上
六.Ref使用
一个对象,持有注册过 ref 特性的所有 DOM 元素和组件实例。可以在父组件中获取子组件的属性和方法。
<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
mounted() { // 获取组件定义的属性
console.log(this.$refs.grand2.name);
}
七.EventBus
用于跨组件通知(不复杂的项目可以使用这种方式)
Vue.prototype.$bus = new Vue();
在vue原型对象上添加一个公共发放,暴露vue示例,供组件接收方法
mounted() {
this.$bus.$emit("my", "我是Grandson1");
},
兄弟间组件接收方法
mounted() {
this.$bus.$on("my", data => {
console.log(data);
});
},
八.Vuex通信
全局统一状态管理,用于大型项目组件间通信,管理数据状态。
vue所有通信方式总结,嗯,就酱啦~
Vue组件间通信方式的更多相关文章
- Vue组件间通信方式到底有几种
1. 前言 Vue的一个核心思想就是组件化.所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS.JavaScript.模板.图片等资源放在一起开发和维护.组件是资源独 ...
- Vue.js组件间通信方式总结
平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue 组件的通信方式(完整版)
几种通信方式无外乎以下几种: Prop(常用) $emit (组件封装用的较多) .sync语法糖 (较少) $attrs & $listeners (组件封装用的较多) provide &a ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- vue组件间通信六种方式(完整版)
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
- Vue 组件的通信方式都有哪些?
说一下 Vue 组件的通信方式都有哪些?(父子组件,兄弟组件,多级嵌套组件等等) 一.父组件向子组件传值 二.子组件向父组件传值 三.兄弟组件传值 四.跨组件 一.父组件向子组件传值 1.1props ...
- vue 组件间的几种通信方式
Props配置 原理:通过props配置,进行父子组件间的通信,跨父子通信需要其他组件进行过渡. 使用: 传递方在标签中添加传递内容 <Son :newName="name" ...
随机推荐
- MySQL数据库基本知识(理论总结)
定义:数据库就是一个文件系统,通过sql语句来获取数据 关系型数据库:关系型数据库存放的是实体时间的关系,在数据库层面来看就是存放的是表和表之间的关联关系 常见的关系型数据库 MySQL D ...
- Java连载16-++传参&关系运算符
一.++再举例 int a = 10; System.out.print(a++);//这里会打印出10,因为他们内部这个print函数有参数相当于参数x=a++ System.out.println ...
- linux应用问题分析命令
1. 描述 应用问题分析方式及命令有很多,一般都结合着使用,今天主要介绍下: (1)top命令,实时查看服务器资源使用情况,类似windows下的资源管理器: (2)tail命令,实时刷新查看日志命令 ...
- Node.js中的自定义模块化
打造步骤: 1. 创建模块 [ Function / Object / String 2. 导出模块 - module.exports = 模块名称 导出一个 - module.exports = ...
- 小白学Python(5)——python-pptx简单应用
python-pptx允许您创建新的演示文稿以及对现有演示文稿进行更改. 实际上,它只允许您对现有演示文稿进行更改:只是,如果您从一个没有幻灯片的演示文稿开始,一开始感觉就像是从头开始创建一个幻灯片. ...
- jdk_Windows基础环境配置
JAVA环境配置 windows 系统环境变量配置: JAVA_HOME C:\Java\jdk1.8.0_25 Path %JAVA_HOME%\bin; classpath .;%JAVA_HOM ...
- linux_密钥
使用密钥文件. 这里假设主机A(192.168.100.3)用来获到主机B(192.168.100.4)的文件. 在主机A上执行如下命令来生成配对密钥: ssh-keygen -t r ...
- H5 API drawImage的参数
drawImage(this,120,0,180,150,0,0,180,150); //mg图片上的x坐标 img图片上的y坐标 剪切的宽 剪切的高 在canvas上的x坐标 在canvas上的y坐 ...
- Python多进程的Join和daemon(守护)的用法
join和daemon 下面仅以多进程为例: 知识点一: 当一个进程启动之后,会默认产生一个主线程,因为线程是程序执行流的最小单元,当设置多线程时,主线程会创建多个子线程,在python中,默认情况下 ...
- [Python] Django框架入门
说明:Django框架入门 当前项目环境:python3.5.django-1.11 项目名:test1 应用名:booktest 命令可简写为:python manager.py xxx => ...