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 父组件调用子组件方法
情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有 ...
随机推荐
- PJzhang:端口快速扫描工具masscan
猫宁!!! 参考:https://www.freebuf.com/sectool/112583.html github地址: https://github.com/robertdavidgraham/ ...
- Linux中移动,复制,删除,打包排除某个目录或文件
移动,复制,删除排除某个文件或目录 cp !(file1|dir2) /data/ 复制文件到/data/,排除file1和dir2 mv !(file1|dir2) /data/ 移动文件到/dat ...
- Git速成学习第三课:创建与合并分支
本来第三课想记录一下远程仓库的创建与克隆0.0但是想了想还是不写了. 这里写一下分支管理中的创建与合并. Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng. ...
- 学习笔记:CentOS7学习之十九:Linux网络管理技术
目录 学习笔记:CentOS7学习之十九:Linux网络管理技术 本文用于记录学习体会.心得,兼做笔记使用,方便以后复习总结.内容基本完全参考学神教育教材,图片大多取材自学神教育资料,在此非常感谢MK ...
- python一个源文件调用另一个源文件的函数
使用软件:pychram 这个是使用了Dight.py的mai()函数,也已经成功运行,但是为什么pychram在下面划红色的波浪线呐.
- 《你必须知道的495个C语言问题》读书笔记之第1-2章:声明和初始化
1. C标准中并没有精确定义数值类型的大小,但作了以下约束: (1) char类型可以存放小于等于127的值: (2) short int和int可以存放小于等于32767的值: (3) long i ...
- Android 变量取名神器
前言 在工作中,我们还在为起变量名而苦恼吗?今天无意间发现一个专门为变量取名而诞生的神器 codelf. 我们可以直接浏览器访问 http://unbug.github.io/codelf/ 现在我们 ...
- HanLP-命名实体识别总结
人名识别 在HanLP中,基于角色标注识别了中国人名.首先系统利用隐马尔可夫模型标注每个词语的角色,之后利用最大模式匹配法对角色序列进行匹配,匹配上模式的即为人名.理论指导文章为:<基于角色标注 ...
- oracle分区表原理学习
1.创建普通表 create table normal_shp(id number,day date,city_number number,note varchar2(100)) tablespace ...
- python-day4(正式学习)
数据类型 不同种类的变量值用不同的数据类型来描述 数字类型 整形:int 定义方式: name(变量名)=(赋值符号)180(变量值) name=int(180) 当变量值为小数时,自动向下取整 运算 ...