知识点: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中父组件触发子组件中的方法的更多相关文章

  1. vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式

    vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...

  2. React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class ...

  3. [转] vue父组件触发子组件事件

    1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template>     < ...

  4. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  5. 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件

    正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...

  6. vue父组件触发子组件方法

    比如应用场景是弹窗中的组件,想要点弹窗时更新该组件展示对应记录的的值 methods: { edit (record) { this.mdl = Object.assign({}, record) t ...

  7. iframe中父页面与子页面的传值方法

    涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值 下面来逐一看一下 ...

  8. vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. vue 父组件调用子组件方法

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有 ...

随机推荐

  1. 阿里云Centos 7.6安装Redis以及开启远程连接

    下载地址:http://redis.io/download,下载最新稳定版本. 本教程使用的最新文档版本为 5.0.5,下载并安装: $ wget http://download.redis.io/r ...

  2. go string类型的特性

    参考文章: http://c.biancheng.net/view/36.html 1. 获取ascii类型字符的长度个数和获取utf8类型字符长度的个数 a. len("咪咪") ...

  3. 主成分分析(PCA)与线性判别分析(LDA)

    主成分分析 线性.非监督.全局的降维算法 PCA最大方差理论 出发点:在信号处理领域,信号具有较大方差,噪声具有较小方差 目标:最大化投影方差,让数据在主投影方向上方差最大 PCA的求解方法: 对样本 ...

  4. [转帖]SPARC简介

    https://www.cnblogs.com/chaohm/p/5674886.html 1.    概述 SPARC(Scalable Processor ARChitecture,可扩展处理器架 ...

  5. [转帖]iphone11的部分参数 UX

    iPhone 11将于9月11号凌晨发布 靠谱爆料在这 https://www.cnbeta.com/articles/tech/884199.htm iphone的分辨率 非常高.. iphone ...

  6. SQLite进阶-15.触发器

    目录 触发器(Trigger) 触发器(Trigger)的要点: 触发器应用 查看触发器 删除触发器 触发器(Trigger) 触发器(Trigger)是数据库的回调函数,它会在指定的数据库事件发生时 ...

  7. 把人都送到房子里的最小花费--最小费用最大流MCMF

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=1533 相邻的容量为inf,费用为1,S到m容量为1,费用为0 ,H到T容量为1,费用为0. 建图跑-最小费 ...

  8. centos8自定义目录安装nginx

    1.安装工具和库 # PCRE是一个Perl库,包括 perl 兼容的正则表达式库.nginx 的 http 模块使用 pcre 来解析正则表达式 # zlib库提供了很多种压缩和解压缩的方式, ng ...

  9. python学习-10 运算符1

    1.加+,减-,乘*,除/ 例如: a = 1 b = 2 c = a + b print(c) 运算结果: 3 Process finished with exit code 0 a = 1 b = ...

  10. PB做的托盘程序(最小化后在左下角显示图标)

    见‘文件’资源