<!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. 牛客新年AK场之模拟二维数组

    链接:https://ac.nowcoder.com/acm/contest/3800/D来源:牛客网 题目描述 Rinne 喜欢使用一种奇怪的方法背单词,现在这些单词被放在了一个 n×mn \tim ...

  2. JS中的提升(即变量和函数声明移动到代码顶部)

    先看代码(第一个代码片段): console.log(a); var a = 1; 如果你认为这是一段不合法的代码,在调用console.log()的时候会输出undefined,你完全正确.但是如果 ...

  3. C语言-对字符串二维数组各个元素进行比较-十进制数转化为其他进制数-进行规则矩阵的输出-190225

    //编写一个函数:从传入的num个字符中找到最长的一个字符,并通过max传回该串地址. //重点:切记这里a[0]就是一个地址. #include<conio.h> #include< ...

  4. linux 开启普通用户sudo root权限操作获取免密

    root 身份登陆 $ visudo然后进入修改配置找到 root    ALL=(ALL) ALL 在下面增加: yourusername ALL=(ALL)   NOPASSWD:  ALL ex ...

  5. lsof 查看打开了一个文件的有哪些进程 统计那个进程打开的文件最多

    lsof | grep /lib64/libc-2.12.so | wc   == 查看打开了一个文件的有哪些进程 lsof | awk '{print $2,$1}' | sort | uniq - ...

  6. byte的取值范围

    byte b = Byte.MAX_VALUE;        b+=1;        System.out.println(b); //输出为-128 取值范围为[-128 -  127] 解析: ...

  7. 重新梳理IT知识之java-04数组

    一.数组的概述 1.数组的理解:数组(Array),是多个相同类型数据按一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理. 2.数组的相关概念 数组名 元素 索引 数组的 ...

  8. 策略模式，重构if-else

    最近完成了我们公司的公众号开发,在微信消息路由选择的时候一开始都是用if-else 来判断,后面if-else月写越多显得十分的乱.在网上简单查了一下解决方法,果然有不少干货,感觉最经典最简洁的还是使 ...

  9. netty集成springboot

    一 前言 springboot 如何集成netty实现mapper调用不为null的问题让好多读者都头疼过,知识追寻者发了一点时间做了个基本入门集成应用给读者们指明条正确的集成方式,我相信,只要你有n ...

  10. 「JSOI2014」打兔子

    「JSOI2014」打兔子 传送门 首先要特判 \(k \ge \lceil \frac{n}{2} \rceil\) 的情况,因为此时显然可以消灭所有的兔子,也就是再环上隔一个点打一枪. 但是我们又 ...