<!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. 如何使用 C++ Inja html template 模板

    C++ html template Inja是现代C ++的模板引擎,受到jinja for python的启发.它有一个简单而强大的模板语法,包含所有变量,循环,条件,包含,回调,您需要的注释,嵌套 ...

  2. oracle10G rac asm 安装总结

    前言 安装步骤是参考三思博主(http://blog.chinaunix.net/uid-22741583-id-177284.html),安装的时候由于概念没搞清楚,急于求成,折腾了两天才顺利装完, ...

  3. 使用Python+Qt时解决QTreeWidget中的内容超出边界后自动隐藏的问题

    问题: 默认情况下,内容超出边界后会自动省略,以...代替,而且无法出现水平滚动条 解决方法: 把VerticalScrollBar和HorizontalScrollBar的值都设为ScrollBar ...

  4. Spring整合Struts2的两种方式

    https://blog.csdn.net/cuiyaoqiang/article/details/51887594

  5. js判断元素是否可见

    dom元素是否可见可使用jq的is方法和dom的offsetParent === null方法 jq中 $(element).is(":visible") === true !!( ...

  6. Mybatis配置——自动使用驼峰命名 属性映射字段（默认为false）

    开发一个新项目,用的springboot,相关配置不太熟悉,导致一些配置没配,到具体开发时问题就暴露出来了,记录第一个配置问题----Mybatis配置-自动使用驼峰命名 属性(userId)映射字段 ...

  7. SSH出错

    [root@node01 ~]# ssh node02 ssh_exchange_identification: Connection closed by remote host 修改连接数无效 [r ...

  8. Mybatis基于XML配置SQL映射器(三)

    Mybatis之动态SQL mybatis 的动态sql语句是基于OGNL表达式的.可以方便的在 sql 语句中实现某些逻辑. 总体说来mybatis 动态SQL 语句主要有以下几类: if choo ...

  9. 膜神犇 DPH

    神犇 DPH 让我写博客.但是,似乎我已经开始写了?!! I am young and naïve!!! Let us orz DPH! 上节课讲DFS,这个是我最擅长的.“暴力出奇迹”!

  10. HTML中多媒体标签技术说明

    在纯文本的HTML页面中加入图片,给原来单调乏味的页面添加生气.HTML语言中利用<IMG>标记插入图片. 1．图片标记<IMG>及其属性 在网站上,网页设计者都使用了大量精心 ...