<!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. UVA 12672 Eleven(DP)

    12672 - Eleven Time limit: 5.000 seconds In this problem, we refer to the digits of a positive integ ...

  2. Java接口自动化测试实战笔记

    综述 代码管理工具Git 测试框架 TestNG 测试报告 Mock 接口框架 HTTP 协议接口 测试框架 HttpClient SprintBoot 自动化测试开发 数据持久层框架 MyBatis ...

  3. hibernate保存数据到mysql时的中文乱码问题

    因为hibernate底层使用的是jdbc的技术,所以我参考了别人使用jdbc保存数据到mysql里面时解决乱码问题的方法! 首先要告诉数据库要插入的字符串的字符集,mysql 默认使用的字符集是 l ...

  4. bzoi1152 [CTSC2006]歌唱王国Singleland

    [CTSC2006]歌唱王国Singleland Time Limit: 30 Sec Memory Limit: 162 MB Description 在歌唱王国,所有人的名字都是一个非空的仅包含整 ...

  5. 如何去掉万恶的wps屏保

    自从换了上个UI的电脑后,就莫名其妙的多了屏保,最开始以为屏蔽掉就好了,发现他依然不屈不挠的有,然后就百度了好多,也没找到...心累 今天终于开窍了,在角落里找打了.话不多说,上图 打开首页,找到应用 ...

  6. 关于UITableViewAutomaticDimension的产生的bug

      一.下面这句代码要想有作用 在iOS11之前需要适配,两个代理都需要实现 - (CGFloat)tableView:(UITableView *)tableView heightForHeader ...

  7. 如何将自己的代码上传至github

    前提条件: 有个github账号,电脑安装了git; 首先在自己的账号里新建一个仓库: https://github.com/qiqi105/littleAlbum.git 进入到你要上传的文件夹内部 ...

  8. 力扣—— Swap Nodes in Pairs（两两交换链表中的节点） python实现

    题目描述: 中文: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, ...

  9. 【leetcode】207. Course Schedule

    题目如下: There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have ...

  10. Python--前端基础之JavaScript（JS的引入方式，JS的变量、常量和标识符，JS的数据类型，运算符，流程控制，JavaScript的对象）

    JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...