<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--
  在组件标签上绑定的事件都vue的自定义事件。
  -->
  <v-xiaoshu @click="handleClick"></v-xiaoshu>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>

  //全局组件内 自定义组件
  Vue.component("v-xiaoshu", {
    //模板中p标签回调函数
    template: `<p @click="handleClick">点我</p>`,
    methods: {
      handleClick() {
        //调用组件的自定义事件
        this.$emit("click");
      }
    }
  })

  var vm = new Vue({
    el: "#app",
    methods: {
      handleClick() {
        console.log("被调用")
      }
    }
  })

</script>
</html>

Vue_子级组件调用主组件函数的更多相关文章

  1. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

  2. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  3. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  4. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  5. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  6. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  7. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 关于Vue中，父组件获取子组件的数据（子组件调用父组件函数）的方法

    1. 父组件调用子组件时,在调用处传给子组件一个方法 :on-update="updateData"   2. 子组件在props中,接收这个方法并声明 props: { onUp ...

  9. react 父组件调用子组件方法、子组件调用父组件方法

    我们闲话不多说,直接上代码 // 父组件 import React, {Component} from 'react'; class Parents extends Component { const ...

随机推荐

  1. [Java 教程 03] 我的第一个Java程序

    现在,大家应该都已经安装好jdk环境了吧!是不是已经跃跃欲试,按耐不住心中的小激动了?那我们现在就来写我们java学习生涯中的第一个java程序. 文件相关设置 为了方便后面大家的学习呢?有一点大家还 ...

  2. scroll兼容性

    document.html=>document.documentElement function scroll() { if(window.pageYOffset != null) // ie9 ...

  3. [HTML知识体系]meta标签的常见用法

    1.meta是什么 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称 ...

  4. 十二、结构模式之门面（Facade）模式

    什么是门面模式 门面模式(也有翻译为外观模式)是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面进行.其为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子 ...

  5. Java使用SSH远程访问Windows并执行命令

    转载于:http://blog.csdn.net/carolzhang8406/article/details/6760430   https://blog.csdn.net/angel_xiaa/a ...

  6. PHP浮点精度问题

    使用php+ - * /计算浮点数的时候,可能会遇到一些计算结果错误的问题,如下: <?php echo intval(0.58 * 100); //输出57 解决办法 <?php ech ...

  7. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  8. QTcpSocket发送结构体

    我需要发送的结构体 struct NetDataHeader_t { int nDataType; int nDataSize; }; struct NetDataBase_t { NetDataHe ...

  9. Security基础(一)：Linux基本防护措施、使用sudo分配管理权限、提高SSH服务安全

    一.Linux基本防护措施 目标: 本案例要求练习Linux系统的基本防护措施,完成以下任务: 修改用户zhangsan的账号属性,设置为2015-12-31日失效(禁止登录) 锁定用户lisi的账户 ...

  10. Comet OJ 茶颜悦色 线段树+扫描线（矩形覆盖最多点+优化）

    题目:https://www.cometoj.com/contest/59/problem/D?problem_id=2713 题意:给你一个正方形,然后给你n个点,这个正方形能随意放哪,要求那个正方 ...