Vue访问子组件实例或子元素
1 尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件(例如,调用子组件的方法)。为了达到这个目的,你可以通过 ref
特性为这个子组件赋予一个 ID 引用。
2 $refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
。
父组件
<template>
<div id="app">
<button @click="start">点击</button>
<Pirate ref="pirate" msg="加勒比海盗"/>
</div>
</template> <script>
import Pirate from './components/Pirate.vue' export default {
name: 'app',
components: {
Pirate
},
methods:{
start(){
this.$refs.pirate.hello();
}
}
}
</script> <style>
</style>
子组件
<template>
<h3>
{{msg}}
</h3>
</template> <script>
export default {
props: {
msg: {
type: String
}
},
methods: {
hello() {
console.log("子组件方法");
}
}
};
</script> <style>
</style>
运行效果
Vue访问子组件实例或子元素的更多相关文章
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- vue 访问子组件示例 或者子元素
1.子组件 <base-input ref="usernameInput"></base-input> this.$refs.usernameInput 2 ...
- vue.js 父组件如何触发子组件中的方法
组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
- Angular5 父组件获取子组件实例( ViewChildren、ViewChild用法)
原文链接 Understanding ViewChildren, ContentChildren, and QueryList in Angular 使用场景 有时候,我们想要在父组件中访问它的子组件 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
- vue中父组件给子组件传值,子组件给父组件传值
1.父组件传给子组件 父元素中 子元素中(通过props传值) 2.子组件传给父组件 子元素中(this.$emit(传过去的名字,传的参数)) 父元素中 通过changeShow的参数data 把修 ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
随机推荐
- ES6新数据类型Symbol
Symbol 需计算字面量属性时使用 const benz = Symbol('benz'); const car = { [benz]: 'benz car' }; const info = Sym ...
- [BZOI 3994] [SDOI2015]约数个数和(莫比乌斯反演+数论分块)
[BZOI 3994] [SDOI2015]约数个数和 题面 设d(x)为x的约数个数,给定N.M,求\(\sum _{i=1}^n \sum_{i=1}^m d(i \times j)\) T组询问 ...
- js如何实现上拉加载更多...
我们在项目中经常使用到下拉加载更多,之前要么是底部写加载按钮,要么是引入插件.今天终于有时间手写一个了,之前感觉挺麻烦,明白原理后,其实很简单... scrollTop:滚动视窗的高度距离window ...
- git Windows终端安装教程
1.下载网址:https://gitforwindows.org/ 2.双击压缩包出现: 3.点击下一步后,选择安装路径: 根据自己的需求选择路径 4.选择安装的组件,建议全选 [每一条解析:] Ad ...
- OCTAVE-CONFIG
SYNOPSIS 总览 octave-config [--m-site-dir] [--oct-site-dir] [-v|--version] [-h|-?|--help] DESCRIPTION ...
- Linux架构之Nginx Web基础1
第41章 Nginx Web基础入门 41.1 Nginx部署 41.1.1 Nginx的安装方式 源码编译 官方仓库 epel仓库 优点 规范 安装简单 安装简单 便于管理 配置易读 缺 ...
- eclipse没有Web项目和Server选项
(1)在Eclipse中菜单help选项中选择install new software选项 (2)在work with 栏中输入 http://download.eclipse.org/release ...
- objectMaaper 反序列化json字段多于或少于实体处理
两种方式 1 忽略json上未知的字段 设置实体类注解 @JsonIgnoreProperties(ignoreUnknown = true) public class Foo { ... } 2 配 ...
- mona!mona!mona!
$ PS: $ 关于\(mona\) 是只很棒的猫啦!想知道的可以自己去看\(persona5\)的游戏流程或者动画版啦. \(PPS:\) 补充一下设定啊,\(mona\)是摩尔加纳(原名)的代号啦 ...
- Mac xlwings aem.aemsend.EventError: Command failed: The user has declined permission. (-1743)
aem.aemsend.EventError: Command failed: The user has declined permission. (-1743) 关于mac pycharm 使用xl ...