知识点: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. mysqlslap 性能测试

    --create-schema=name 指定测试的数据库名,默认是mysqlslap --engine=name 创建测试表所使用的存储引擎,可指定多个 --concurrency=N 模拟N个客户 ...

  2. 【ES 系列1】介绍与方案设计

    简介 ElasticSearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速.近实时地存储.搜索和分析大量数据.它通常被用作驱动具有复杂搜索功能和需求的应用程序的底层引擎/技术.适用于需要大 ...

  3. Android netty客户端入门

    新建项目,加入netty库 implementation 'io.netty:netty-all:4.1.36.Final'

  4. new , delete常见用法和与malloc,free比较

    new/delete是C++的运算符.malloc与free是C++/C语言的标准库函数,new/delete只能在C++中使用,malloc与free在C与C++中都能够使用,它们都可用于申请动态内 ...

  5. ssh速度慢

    原因:DNS解析默认开了 解决方法: vi /etc/ssh/sshd_config, 将#UseDNS yes 改为 : UseDNS no 然后重启ssh服务即可.   PS: 其实不好,因为毕竟 ...

  6. HDU3191 【输出次短路条数】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3191 How Many Paths Are There Time Limit: 2000/1000 M ...

  7. html当中如何引用js文件

    3)html当中如何引用js文件 如果需要javascript工程师和html美工各干各的工作,需要分开写文件. 例 1.2 <html><head>    <scrip ...

  8. Beanutils.copyProperties( )用法及重写提高效率

    参考地址:https://blog.csdn.net/w05980598/article/details/79134379 待研究中.....

  9. (十五)mybatis 逆向工程

    目录 为什么需要逆向工程 使用方法 如何读懂生成的代码 总结 为什么需要逆向工程 对于数据库中的那么多的表 ,基本的 CRUD 操作 ,以及 mybatis 需要使用的 接口.mapper ,这些工作 ...

  10. Centos安装elasticsearch,php连接使用

    一.下载安装JAVA 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...