知识点: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. STM32PWM之——定时器(1)

    定时器功能简介 STM32 一共有 8 个都为 16 位的定时器.其中 TIM6. TIM7 是基本定时器:TIM2.TIM3. TIM4. TIM5 是通用定时器: TIM1 和 TIM8 是高级定 ...

  2. tabs 导航 及内容切换

    <!-- 导航头 --> <div class="col-md-6" style="padding: 0px"> <ul id=& ...

  3. 解决Eclipse中文文档注释错位-处女座的悲哀!

    1.右键打开eclips属性 2.选择兼容性为win8,然后打开Eclipse即可解决 作者:醉烟 出处:https://www.cnblogs.com/WangLei2018/    本文版权归作者 ...

  4. 在Ubuntu中搭建Python3的虚拟环境并开始django项目

    搭建环境: 1.首先安装virtualenv: pip install virtualenv 2.创建虚拟环境:(指定安装Python3,若不写-p python3,默认安装Python2.7),en ...

  5. SQL0668N Operation not allowed for reason code "3" on table "TEST". SQLSTATE=57016

    问题描述: 查询,操作表都报如下错误 SQL0668N  Operation not allowed for reason code "3" on table "TEST ...

  6. MySql设计表中的create_time和update_time字段

    一般create_time和update_time字段的类型为datetime类型,长度为0

  7. Simple Library Management System HDU - 1497(图书管理系统)

    Problem Description After AC all the hardest problems in the world , the ACboy 8006 now has nothing ...

  8. 小木棒HDU1455(DFS+剪枝)

    题意:HDU1455 给出n个小木棒的长度,他们是又数根长度相同的木棒剪短得来的,问没剪短之前的木棒长度最短是多少. 思路: 见代码:https://www.cnblogs.com/fqfzs/p/9 ...

  9. 用pandas库对csv文件中的文本数据进行分析处理

    #数据分析 import pandas import csv old_path = r'd:\2000W\200W-400W.csv' f = open(old_path,'r',encoding=' ...

  10. 8.perf top系统性能分析工具

    perf 是一个调查 Linux 中各种性能问题的有力工具. # perf --help  usage: perf [--version] [--help] COMMAND [ARGS]  The m ...