<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script src="../JS/vue.js"></script>

<body>

<!--父亲组件-->

<div id="app">

<cpn ref="aa"></cpn>

    <button @click="abc"></button>

</div>

<!--父亲组件-->

<!--组件-->

<template id="cpn">

<div >

<!--    上面的div一定要加的一定要有个父级元素才能显示-->

</div>

</template>

<!--组件-->

<script>

    //父传子使用props

    const cpn={

        template:"#cpn",

        methods:{

            showit(){

                alert("hahah");

            }

        },

        data(){

            return{

                name: 'hahahha'

            }

        }

    }

    const app =new Vue({

        el:"#app", //挂载那个元素

        components:{

            cpn

        },

        methods:{

            abc()

            {

                console.log(this.$refs.aa.showit());

            }

        }

    })

</script>

</body>

</html>

vue 父组件调用子组件方法简单例子（笔记）的更多相关文章

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

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  2. vue+element ui项目总结点（四）零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  3. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  4. vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  5. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  6. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  7. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  8. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  9. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  10. reactjs--父组件调用子组件的内部方法（转载）

    reactjs--父组件调用子组件的内部方法 发表于2016/10/11 9:21:37  965人阅读 1.引入相关js <script src="js/react.js" ...

随机推荐

  1. 学习笔记（22）- plato-训练端到端的模型

    原始文档 Train an end-to-end model To get started we can train a very simple model using Ludwig (feel fr ...

  2. linux python3编译以及 卸载，python默认为python3 ，pip默认为pip3,亲测版

    前置准备yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-de ...

  3. mysql 单表批量备份sh文件

    #!/bin/bashDBS=$(mysql -u root -padmin -e 'use database; show tables;' | awk '{ print $1 }');for tab ...

  4. Python爬虫：urllib库的基本使用

    请求网址获取网页代码 import urllib.request url = "http://www.baidu.com" response = urllib.request.ur ...

  5. Springboot学习：核心配置文件

    核心配置文件介绍 SpringBoot使用一个全局配置文件,配置文件名是固定的 application.properties application.yml 配置文件的作用:修改SpringBoot自 ...

  6. Spring Boot Log 日志使用教程

    我们编写任何 Spring Boot 程序,可能绕不开的就是 log 日志框架(组件). 在大多数程序员眼中日志是用来定位问题的.这很重要. 本项目源码下载 注意本项目提供的源码已在后期重新编写,有部 ...

  7. DOCKSWARM服务网络原理

    如图所示,我们将在 swarm 集群中部署 “client” 服务 和 “vote” 服务,其中 “vote” 服务部署多个副本. 客户端请求 “vote” 服务时,输出结果中包含服务端的容器 ID, ...

  8. 【PAT甲级】1056 Mice and Rice (25 分)

    题意: 输入两个正整数N和M(<=1000),接着输入两行,每行N个数,第一行为每只老鼠的重量,第二行为每只老鼠出战的顺序.输出它们的名次.(按照出战顺序每M只老鼠分为一组,剩余不足M只为一组, ...

  9. 「Luogu P1975 [国家集训队]排队」

    题目大意 给出一个序列 \(h\),支持交换其中的两数,求出每一时刻的逆序对个数. 分析 求逆序对是 \(O(N\log_2N)\) 的,有 \(M\) 个操作,如果暴力求的话时间复杂度就是 \(O( ...

  10. 100w并发产生唯一随机id

    #coding=utf-8 import time import base64 import getopt import sys import threading import random impo ...