vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性
(1)子组件 :
child_crud.js
var html_child_crud=
"<div>\n" +
。。。子组件页面内容
"</div>";
var child_crud= Vue.component('child_crud', {
template:html_child_crud ,
data : function(){
return {
name:"子组件"
}
},
methods: {
//子组件中的方法
query:function(){ }
},
});
(2)父组件:
<script type="text/javascript" src="../child_crud.js"></script>
<div id="myvue">
<template>
<child_crud ref="childComponent"></child_crud>
</template>
</div>
<script>
var myvue = new Vue({
el: '#myvue',
data:function() {
return {
};
},
methods: {
invokeChildmethod:function(){
//父类通过ref="face_device_log"给子类起的名字face_device_log,调用子类中的方法
this.$refs.childComponent.query();
//调用子类中属性,更改子类中属性
this.$refs.childComponent.name='parent';
}
}
})
</script>
vue.js中父组件触发子组件中的方法的更多相关文章
- vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式
vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...
- React 父组件触发子组件事件
Parent组件 import React from "react"; import Child from "./component/Child"; class ...
- [转] vue父组件触发子组件事件
1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> < ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件
正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...
- vue父组件触发子组件方法
比如应用场景是弹窗中的组件,想要点弹窗时更新该组件展示对应记录的的值 methods: { edit (record) { this.mdl = Object.assign({}, record) t ...
- iframe中父页面与子页面的传值方法
涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值 下面来逐一看一下 ...
- vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue 父组件调用子组件方法
情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有 ...
随机推荐
- 线上Storm的worker,executor,task参数调优篇
问题引入: 线上最近的数据量越来越大,出现了数据处理延迟的现象,观察storm ui的各项数据,发现有大量的spout失败的情况,如下: ------------------------------- ...
- JavaSE基础(九)--Java二进制运算
Java二进制运算 Java二进制表示法 首先了解下二进制,二进制是相对十进制而言的,当然还有八进制,十六进制等等,我们常用的都是十进制,计算机用的都是二进制,而符号表示常用十六进制. 二进制就是只有 ...
- Java:集合类的数据结构
本文源自参考<Think in Java>,多篇博文以及阅读源码的总结 前言 Java的集合其实就是各种基本的数据结构(栈,队列,hash表等),基于业务需求进而演变出的Java特有的数据 ...
- Centos7下关闭Firewalls配置iptables
在网上搜索了很多这种资料,现在总结一下以备后用. 1.关闭防火墙:sudo systemctl stop firewalld.service 2.关闭开机启动:sudo systemctl disab ...
- Ubuntu18.04中安装Python3.7教程
Ubuntu18.04中安装Python3.7教程 链接https://blog.csdn.net/weixin_42056625/article/details/82970358
- BurpSuite 爆破网页后台登陆
由于 Burp Suite是由Java语言编写而成,所以你需要首先安装JAVA的运行环境,而Java自身的跨平台性,使得软件几乎可以在任何平台上使用.Burp Suite不像其他的自动化测试工具,它需 ...
- -bash: /usr/librxec/grepconf.sh:Nosuch file or directory
最近修改/etc/profile文件时,不小心在后面添加了source /etc/profile,导致使用xshell登录远程linux的时候出现下面的信息, 一直无法进入linux,将profile ...
- ListUtils的简单集合操作和原理
1 Maven依赖 <dependency> <groupId>org.apache.commons</groupId> <artifactId>com ...
- SQL Prompt 注册后隔一段时间莫名无法使用的处理
https://blog.csdn.net/anyqu/article/details/88537197 以前一直以为是授权丢了,反复重装也解决不了 Sql Prompt---Unable to co ...
- *4.1 所有类型都从System.Object派生