vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值。
子组件定义如下:
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
子组件修改了数据通过$emit来通知父组件。
父组件中通过添加属性来改变子组件的值。
<cheildren icon-class="icon" class-name="classname"></children>
2,父子组件方法相互调用
父组件可以通过ref这个属性来获取完整的子组件的所有属性,包括数据,方法。也就是完全获取子组件的这个vue实例。
子组件可以调用this.$parent[method]来执行父组件的方法。
3,不幸的是,使用 $parent
属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地,它用到了两个新的实例选项:provide
和 inject
。
在父组件中去provide 一个方法。在子组件中去inject这个方法。就可以直接调用父组件的方法。
Vue.component('parent', {
provide: function () {
return {
getMethods: this.getMethods
}
},
}
Vue.component('children', {
inject: ['getMethods'],
}
vue 中父子组件之间的交互的更多相关文章
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- vue之父子组件之间的通信方式
(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...
- vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
随机推荐
- ASP.NET MVC 音乐商店 - 0 概览
这是一个系列文章,原文内容出自微软的 MusicStore. 首先对原文内容进行了简单的翻译,以方便大家参考,另外对于其中的部分内容,也进行了简单的分析,使用的 Visual Studio 也换成了中 ...
- Android应用开发详解
目录结构 1.Android概述 2.Android开发基础 未完待续……
- 多线程(五)~ wait/notify机制(等待/通知)
首先我们来看一张图,这张图描述了线程操作的几个步骤. 图已经描述的很清楚了,这里除了wait()之外,其他的前面都已经接触过了. 这一章我们主要来说一下和wait()相关的操作,其实和wait()相关 ...
- Tcpdump usage examples
In most cases you will need root permission to be able to capture packets on an interface. Using tcp ...
- 《3D打印:从想象到现实》:基本没发现独到之处
本书汇总了3D打印的相关咨询:原理.可能的或已经实现的应用.商业模式等等.由于3D打印是最近媒体上比较热的信息,对我来说书中的大部分内容都没有独到之处,都是已知的.
- python入门18 继承和多态
继承:子类继承父类的属性和方法 class 子类名(父类1,父类2) 多态:子类重写父类的方法 判断对象是否是某个类的实例: isinstance(object,class) 父类-汽车类 #co ...
- angular2 里父子组件传值的坑
1.如果传的是基本类型的值,子组件里改变该值,父组件无变化 2.如果传的是对象,子组件里改变对象里的变量,父组件会变化 3.如果传的是函数,this不会继续指向父组件对象了,如果需要this指向父组件 ...
- IOS NSLayoutConstraint 页面布局(通过代码添加约束)
#import "ViewController.h" @interface ViewController () @property (nonatomic, strong) UIVi ...
- bootstrapTable表格表头换行
使用bootstrapTable组件,达到表头中有一格显示两行,其他表头均为一行,效果图如下: 代码: { field : 'pay_date', title : '已还款完成时间', valign: ...
- Android(java)学习笔记43:Map集合的遍历之键找值
1. Map集合的遍历之键找值 package cn.itcast_01; import java.util.HashMap; import java.util.Map; import java.u ...