vue必须掌握之组件通信(7种方法)
方法一:$emit / props
- 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件
<!--父组件-->
<template>
<div>
<Child :message="message" @customEvent="customEvent"/>
</div>
</template>
<script>
export default {
components:{
Child
},
data(){
return {
message:'来自父组件的问候'
}
},
methods:{
customEvent(value){
//执行子组件触发的事件
console.log(value)
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--子组件-->
<template>
<div>
<p>{{message}}</p>
<button @click="handleClick">点击向父组件传值</button>
</div>
</template>
<script>
export default {
props:['message'],//得到父组件传递过来的数据
methods:{
handleClick(){
//触发父组件中的事件
this.$emit('customEvent','来自子组件的问候');
}
}
}
</script>
方法二、$parent / $children 与 ref
- ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
- $parent / $children:访问父 / 所有子实例
<!--父组件-->
<template>
<div>
<Child ref='children'/>
<button @click="handleClick">访问子组件</button>
</div>
</template>
<script>
import Child from './child'
export default {
components:{
Child
},
data(){
return {
message:'我是父组件的数据'
}
},
methods:{
handleClick(){
console.log(this.$refs.children.message)
console.log(this.$children[0].message)
//需要注意的是使用$children返回的是一个数组
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--子组件-->
<template>
<div>
<p>{{message}}</p>
<button @click="handleClick">访问父组件</button>
</div>
</template>
<script>
export default {
data(){
return {
message:'我是子组件的数据'
}
},
methods:{
handleClick(){
console.log(this.$parent.message)
}
}
}
</script>
方法三、中央事件总线bus
- 新建一个Vue事件bus对象,然后通过 bus.$emit 触发事件, bus.$on 监听触发的事件。
//eventBus.js
import Vue from 'vue';
export default new Vue();
- 在需要用到的两个不同组件分别引入即可
- 需要注意的是接受数据的组件要清除事件总线eventBus
<!--A组件-->
<template>
<div>
<p>A组件</p>
<button @click="handleClick">向B组件传值</button>
</div>
</template>
<script>
import eventBus from 'eventBus.js的路径'
export default {
data(){
return {
data:'我是A组件的数据'
}
},
methods:{
handleClick(){
eventBus.$emit('change',this.data);
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--B组件-->
<template>
<div>
<p>B组件</p>
</div>
</template>
<script>
import eventBus from 'eventBus.js的路径';
export default {
//触发事件一般用mounted 或 created 钩子来监听
mounted(){
//触发和监听的事件名称要一致
eventBus.$on('change',(value)=>{
console.log(value)
})
},
destroyed(){
eventBus.$off('change');
}
}
</script>
方法四、依赖注入 provide和inject
- 适用场景:高阶插件/组件库
- 类型:
- provide:Object | () => Object
- inject:Array<string> | { [key: string]: string | Symbol | Object }
- 父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。
- 不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。
<!--父组件-->
<template>
<div>
<h1>父组件</h1>
<Son/>
</div>
</template>
<script>
import Son from './son'
export default {
components:{
Son
},
data(){
return {
message:'我是父组件的数据'
}
},
provide(){
return {
message:this.message
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--子组件-->
<template>
<div>
<h1>子组件</h1>
<GrandSon />
</div>
</template>
<script>
import GrandSon from './grandSon';
export default {
components:{
GrandSon
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--孙子组件-->
<template>
<div>
<h1>孙子组件</h1>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
inject:['message']
}
</script>
方法五、$attrs 和 $listeners
- 适用场景:多层、递归组件
- $attrs 是包含了所以父组件在子组件上设置的属性(除了prop传递的属性、class 和 style )
- $listeners 是组件的内置属性,它的值是父组件(不含.native修饰器的) v-on事件监听器
- 如果子组件已经绑定$listener中同名的监听器,则两个监听器函数会以冒泡的方式先后执行
<!--父组件-->
<template>
<div>
<h1>父组件</h1>
<Son :message1="message1" :message2="message2" name='attr' v-on="{onChange1,onChange2}"/>
</div>
</template>
<script>
import Son from './son'
export default {
components:{
Son
},
data(){
return {
message1:'我是父组件的数据1',
message2:'我是父组件的数据2'
}
},
methods:{
onChange1(val){
console.log("父组件:" + val)
},
onChange2(val){
console.log(val)
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--子组件-->
<template>
<div>
<h1>子组件</h1>
<!--关键点-->
<GrandSon v-bind="$attrs" v-on="$listeners" @onChange1="onChange1"/>
</div>
</template>
<script>
import GrandSon from './grandSon';
export default {
inheritAttrs:false,
/**
* 1、当设置inheritAttrs为true(默认)时,子组件的顶层标签元素中会渲染出父组件传递过来(前提:子组件的props中未注册父组件传递过来的属性)的属性。
* 2、当设置inheritAttrs为false时,子组件的顶层标签元素中不会渲染出父组件传递过来(前提:子组件的props中未注册父组件传递过来的属性)的属性。
* 3、不管inheritAttrs为true或者false,子组件中都能通过$attrs属性获取到父组件中传递过来的属性。
*/
components:{
GrandSon
},
methods:{
//与父组件监听的事件同名了
onChange1(val){
console.log('子组件:'+val)
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--孙子组件-->
<template>
<div>
<h1>孙子组件</h1>
<p>{{message2}}</p>
<button @click="handleClick">点击触发父组件的方法</button>
</div>
</template>
<script>
export default {
props:['message2'], //message2被声明
created(){
console.log(this.$attrs) //{message1: "我是父组件的数据1", name: "attr"}
console.log(this.$listeners) //{onChange1: ƒ, onChange2: ƒ}
},
methods:{
handleClick(){
this.$emit('onChange1','来自孙子的问候')
}
}
}
</script>
方法六、v-model
- 父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit('input',val)自动修改v-model绑定的值
- prop属性和触发事件可以通过model修改
<!--父组件-->
<template>
<div>
<h1>父组件</h1>
<p>{{inputValue}}</p>
<Son v-model="inputValue"/>
</div>
</template>
<script>
import Son from './son'
export default {
components:{
Son
},
data(){
return {
inputValue:'父组件的默认消息'
}
}
}
</script>
<!-------------------------------------------------------------------------------------------->
<!--子组件-->
<template>
<div>
<h1>子组件</h1>
<p>父组件传过来的值:{{value}}</p>
<input @input="handleChange" />
</div>
</template>
<script>
export default {
model:{
prop:'value', //默认(value)可以修改任意值
event:'input' //默认(input)事件名也可以修改
},
props:{
value:String
},
methods:{
handleChange(e){
this.$emit('input',e.target.value)
}
}
}
</script>
方法七、VueX
vue必须掌握之组件通信(7种方法)的更多相关文章
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- Vue 创建组件的两种方法
地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue学习记录⑤(组件通信-父与子)
今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- vue创建组件的几种方法
<html> <head> <title>vue创建组件</title> <meta charset="utf-8"> ...
- Vue全局组件创建三种方法
<my-com1></my-com1> <my-com2></my-com2> <template id="tmp1"> ...
- html中创建并调用vue组件的几种方法
最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...
- Vue组件通信父传方法给子组件调用
// 父组件中将 :meth='changeCom1' 传入入子组件 , 子组件运行 meth(i) 方法 并给他传参数 ,在父组件可以获取这个参数,并做相应的操作 // 父组件 <temp ...
随机推荐
- 杭电-------2055An Easy Problem(C语言)
#include<stdio.h> int main() { int m; int i; scanf("%d", &m); ]; int y; int z; ; ...
- Java高级项目实战02:客户关系管理系统CRM系统模块分析与介绍
本文承接上一篇:Java高级项目实战之CRM系统01:CRM系统概念和分类.企业项目开发流程 先来CRM系统结构图: 每个模块作用介绍如下: 1.营销管理 营销机会管理:针对企业中客户的质询需求所建立 ...
- VSTO开发指南(VB2013版) 第三章 Excel编程
通过前两章的内容,有了一定的基础,但进入第三章,实例的步骤非常多,并且随着VS版本的升级,部分功能菜单界面发生了很大变化,所以,第三章的案例我将逐步编写! 实例3.1的目标就是给Excel写一个加载宏 ...
- absoulue与relative配合定位盒子居中问题
如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分?定位完成后为什么又需要margin-left与margin-top各往回走50%的长度,别忘记用z-i ...
- Javascript 基础学习(七)常用内置对象
Array 定义 数组也是一个对象,是一个用来存储数据的对象.和Object类似,但是它的存储效率比普通对象要高.数组中保存的内容我们称为元素.数组使用索引(index)来操作元素.索引指由0开始的整 ...
- 通过LD_PRELOAD绕过disable_functions
今天做靶场时遇到了一个情形:拿到了webshell,却不能执行任何命令,如图 后来百度知道了disable_functions功能,这类服务器针对命令执行函数做了防范措施 一般绕过思路是利用漏掉的函数 ...
- kernel定制,编译内核
定制kernel,就需要手动编译内核 一,准备开发环境 1,包组:Development Tools,Server Platform Development 2,包:ncurses和ncurses-d ...
- App自动化测试环境搭建
只做记录和注意点,详细内容不做解释 环境:win+appium+夜神模拟器+python 需要用到的工具: 1.java JDK 2. node.js 3. Android SDK 4.Appium- ...
- Centos7.6 Mysql数据库自动备份配置
1.查看磁盘空间情况 执行 df -h 选择剩余空间最大的目录 (以/目录为例) 2.创建备份目录: cd / mkdir backup cd backup 3.创建备份Shell脚本: vim mo ...
- 离线部署ArcGIS Runtime for Android100.5.0
环境 系统:window 7 JDK:1.8.0_151 Maven:3.6.1 Android Studio:2.3 ArcGIS Runtime SDK for Android:100.5.0 1 ...