知识点: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. [Paper Reading] Show, Attend and Tell: Neural Image Caption Generation with Visual Attention

    论文链接:https://arxiv.org/pdf/1502.03044.pdf 代码链接:https://github.com/kelvinxu/arctic-captions & htt ...

  2. 搭建IIS CA DC Exchange TMG SQL (CA DC篇)

    搭建IIS CA DC Exchange TMG SQL (CA DC篇)   步骤 1: 在“下一步(N) > (按下按钮)”(位于“添加角色向导”中)上用户左键单击   步骤 2: 在“Ac ...

  3. 【转】MySql 三大知识点——索引、锁、事务

    索引 索引,类似书籍的目录,可以根据目录的某个页码立即找到对应的内容. 索引的优点:1. 天生排序.2. 快速查找. 索引的缺点:1. 占用空间.2. 降低更新表的速度. 注意点:小表使用全表扫描更快 ...

  4. AtCoder M-SOLUTIONS 2019 Task E. Product of Arithmetic Progression

    problem link Official editorial: code: int main() { #if defined LOCAL && !defined DUIPAI ifs ...

  5. ubuntu18安装PacketTracer-7.2.2

    1.下载需要先注册个账号 https://www.netacad.com/zh-hans/courses/packet-tracer  2.运行.run文件 chmod +x PacketTracer ...

  6. LC 394. Decode String

    问题描述 Given an encoded string, return its decoded string. The encoding rule is: k[encoded_string], wh ...

  7. HTNL基础之四

    11.<nav>导航元素 标签定义及使用说明 表示页面中导航链接的部分,例如:传统导航条,侧边栏导航,页内导航,翻页等 <nav> 标签定义导航链接的部分. 并不是所有的 HT ...

  8. phpstudy的设置目录列表显示403找不到

    小白视角具体步骤如下 在phpstudy的->其它选项菜单->phpstudy设置->允许目录列表 phpstudy->其他选项菜单->站点域名管理(新增并保存) 然后会 ...

  9. idea 如何加入插件SonarLint

    idea 如何加入插件SonarLint   IDEA的插件安装有两种方法:一是在线安装:二是离线安装,即将插件的安装包下载以后从本地安装.   一.在线安装的过程:         1.打开IDEA ...

  10. centos7 yum安装nginx和 编译安装tengine

    说明 我这里给大家演示一下如何安装nginx,nginx我就不多介绍了,然后我再说一点就是,安装的两种方法都可以,编译安装和yum安装,我不能每个都演示两遍呀,所以看到我这博客的你,学会举一反三好吧? ...