<!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技术中的三大特性

    1．虚拟机                                Java虚拟机JVM(Java Virtual Machine)在Java编程里面具有非常重要的地位,约相当于前面学到的Jav ...

  2. 用C实现基本的输出参数个数与参数内容

    开发环境为 centos7 和 gcc4.8.5,代码如下: /** * 用C实现基本的输出参数个数与参数内容 */ #include <stdio.h> int main(int arg ...

  3. 深度学习之Tensorflow 工程化项目实战 配套资源

    https://www.aianaconda.com/index/CodeProject

  4. 【虚拟机】:"该虚拟机似乎正在使用中。 如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权。否则，请按“取消(C)”按钮以防损坏。"

    1.可能是由于上次使用虚拟机,没有正常关闭出现了这种情况,于是把问题复制粘贴搜了一下. 2.出现了如下可行的解决方法:把后缀名为.vmdk.lck的都删除掉. 3.然后再打开虚拟机就可以了.

  5. Yum与RPM

    Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  6. 51单片机外部中断INT0实例（汇编程序）

    ;普中51开发板 ;单片机的P3.2(INT0)引脚与按键K3脚连接 ;用汇编语言实现:按一次K1外部中断INT0响应一次,LED显示值加1(十进制), ;前提是共阴数码LED第一位,需要设定,由P0 ...

  7. gene network analysis

      基因表达分析包括3个层次[68], 首先是单基因水平, 即比较对照组与实验组的每个基因是否存在表达差异, 这主要指差异基因表达分析; 其次是多基因水平, 如按照基因的共同功能.相互作用.共同表达等 ...

  8. cocos2D-X 屏幕适配

    { //https://v.youku.com/v_show/id_XNTIzOTM1MDYw.html }

  9. hdu 3572 Task Schedule (Dinic模板)

    Problem Description Our geometry princess XMM has stoped her study in computational geometry to conc ...

  10. 使用Github SSH Key来避免Hexo部署时输入账户密码

    博客原文:http://fengyao.me/2016/04/10/use-git-ssh-key-carry-hexo-deploy/ 前言 当hexo使用https方式连接Github时,每次执行 ...