组件

什么是组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

使用组件

示例:

  子组件:

<template>
<div>
child
</div>
</template> <script>
export default {
name: "child",
props: "someprops",
methods: {
parentHandleclick(e) {
console.log(e)
}
}
}
</script>

  组件:

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

注意:

   1、在子组件中:<div></div>是必须要存在的

  2、在父组件中:首先要引入子组件 import Child from './child';

    3、 <child ref="mychild"></child>是在父组件中为子组件添加一个占位,ref="mychild"是子组件在父组件中的名字

    4、父组件中 components: {  是声明子组件在父组件中的名字

5、在父组件的方法中调用子组件的方法,很重要   this.$refs.mychild.parentHandleclick("嘿嘿嘿");

vue.js 父组件如何触发子组件中的方法的更多相关文章

  1. vue 关于父组件无法触发子组件的事件的解决方法

    一般情况导致无法触发子组件的方法  基本都是由于子组件未渲染完成 就进行了调用,解决方法如下: 1.加定时器  setTimeout(() => { //加定时器原因是,子组件页面未渲染处理就做 ...

  2. React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class ...

  3. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  4. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

  5. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  6. 父组件向子组件传值时,值已经传过来却没有触发子组件的watch监听,解决~

    需求: 父组件像封装的子组件传值  (父组件属性传值,子组件props接受)   子组件接受后经过处理回显页面; 预想:子组件接受值 , 经过watch监听,在监听中处理数据,回显数据; 问题:子组件 ...

  7. vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式

    vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...

  8. 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...

  9. Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法

    一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...

随机推荐

  1. collectionView必须点击两次才跳转

    今天遇到一个很奇怪的现象:collectionView必须点击两次才能跳转.具体看代码: -(void)collectionView:(UICollectionView *)collectionVie ...

  2. 【Android】实例 忐忑的精灵

    在Android Studio中创建项目,名称为“Animation And Multimedia”,然后在该项目中创建一个Module,名称为“Frame-By-Frame Animation”.在 ...

  3. svn命令行批量删除和批量添加

    svn命令行批量删除和批量添加 如果使用svn的命令行,例如在linux下的终端中使用,svn的添加命令是svn add,删除命令是svn del,但是缺乏批量的操作,如果我在资源管理器中,手动添加了 ...

  4. Caffe: Vs13添加CUDA支持

    1.  右键工程 点击:Building Dependency 右击:Build Customizations 点击选项:CUDA 7.5 2.添加C++依赖: cudart.lib kernel32 ...

  5. (转)基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

    http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...

  6. JSP状态管理_1_Cookie

    http协议的无状态性:当浏览器发送请求飞服务器时,服务器相应客户端请求:但当同一个浏览器再次发送请求给浏览器时,服务器并不知道它就是刚才那个客户端. 保存用户状态的两大机制:Session,Cook ...

  7. 通俗易懂之SpringMVC&Struts2前端拦截器详解

    直接进入主题吧!一,配置Struts2的拦截器分两步走1配置对应的拦截器类:2在配置文件Struts.xml中进行配置拦截器同时在Strust2中配置拦截器类有三种方法1实现Interceptor接口 ...

  8. revit二次开发之族的类型参数与实例参数的转换

    1背景小伙伴在做revit二次开发的时候,可能需要在族环境中将族的类型参数与实例参数相互转换. 2思路1.使用族管理器FamilyManager,参见注释12.首先获取需要转换的参数(单个与批量),参 ...

  9. 被遗忘的 Logrotate

    转自: http://huoding.com/2013/04/21/246 被遗忘的 Logrotate 发表于 2013-04-21 我发现很多人的服务器上都运行着一些诸如每天切分 Nginx 日志 ...

  10. 使用Arcgis进行画面(线)并计算大小(长度)。

    在使用Arcgis API for JavaScript进行做地图开发的过程中,在地图进行画线.画面是经常使用的功能.本文主要介绍这一功能. 本文适用Arcgis API版本:Arcgis API f ...