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 父组件调用子组件方法
情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有 ...
随机推荐
- flask上下管理文相关 - 总结
flask上下管理文相关 - 总结 flask上下文管理机制 当用户请求到来之后,flask内部会创建两个对象: ctx = ReqeustContext(),内部封装request/sesion a ...
- ETH&EOS开发资源及工具集合(完整汇总版)
ETH&EOS开发资源及工具集合(完整汇总版) 3113 ETH开发资源篇 一.开发语言 · Solidity - 官方推荐以太坊智能合约开发语言,也是目前最为主流的智能合约语 ...
- std::replace函数
需包含头文件#include <algorithm> template <class ForwardIterator, class T> void replace (Forwa ...
- [CF997C]Sky Full of Stars_二项式反演_等比数列_容斥原理
Sky Full of Stars 题目链接:http://codeforces.com/problemset/problem/997/C 数据范围:略. 题解: 首先考虑拟对象,如果至少有一行完全相 ...
- Object类入门这一篇就够了!
第三阶段 JAVA常见对象的学习 第一章 常见对象--Object类 引言: 在讲解Object类之前,我们不得不简单的提一下什么是API,先贴一组百度百科的解释: API(Application P ...
- android 自动化测试 ---python wrapper(python 包装)
关于有道云笔记复制的东西不能直接copy到博客园,可以选择使用txt文件做个媒介 1.appium 2.monkeyrunner 3.uiautomator2 前面两种种方式都要加载androidsd ...
- java知识随笔整理-标量函数和表值函数
以sql server为例: 1.表值函数 用户定义表值函数返回 table 数据类型,表是单个 SELECT 语句的结果集. 示例代码CREATE FUNCTION Test_GetEmployee ...
- Java打包
打成jar包 如果你使用的是maven来管理项目,执行以下命令既可以 cd 项目跟目录(和pom.xml同级)mvn clean package## 或者执行下面的命令## 排除测试代码后进行打包mv ...
- 第6章:使用Python监控Linux系统
1.Python编写的监控工具 1).多功能系统资源统计工具dstat dstat是一个用Python编写的多功能系统资源统计工具,用来取代Linux下的vmstat,iostat,netstat和i ...
- Mancala II
题目描述 Mancala is a family of board games played around the world, sometimes called sowing games, or c ...