<!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. 消息队列（五）--- RocketMQ-消息存储1

    问题 : 部署时如何知道自己是 broker 还是 NameServer topic 订阅信息放在哪里 broker 的作用到底是什么 纪录是如何持久化的 群发的时候,是如何储存消息的 send 方法 ...

  2. B站上线互动视频背后，是一场谁都输不起的未来之战

    毋庸置疑的是,视频网站的竞争已愈发激烈.而它们的竞争体现在多个维度,比如买视频会员赠送购物网站会员.依靠各自的社交体系不断尝试打破圈层瓶颈等.当然,最直接的竞争还是体现在内容层面.购买独家版权.制作原 ...

  3. DBC里首饰不同代码的含义

    DuraMax"这个就是我们要找的物件持久的属性了,一开始怎么也找不到,原来这里的变量中 "1000"表示1个持久度,那么"40000"就表示40个持 ...

  4. JPA中实现双向多对多的关联关系(附代码下载)

    场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...

  5. XMPPFramework 框架

    https://blog.csdn.net/qq_29846663/article/details/70170646 2017-04-14 11:37:02 于海明 阅读数 478更多 分类专栏: i ...

  6. 吴裕雄--天生自然Numpy库学习笔记：NumPy 统计函数

    NumPy 提供了很多统计函数,用于从数组中查找最小元素,最大元素,百分位标准差和方差等. numpy.amin() 用于计算数组中的元素沿指定轴的最小值. numpy.amax() 用于计算数组中的 ...

  7. 安装Ubuntu后的一些配置

    Ubuntu安装的一些配置 搜狗拼音的安装 卸载ibus和它的配置, 卸载顶部面板的键盘指示 sudo apt remove ibus sudo apt purge ibus sudo apt rem ...

  8. 热部署简介及在eclipse安装插件JRebel进行热部署

    一.热部署简介 1.热部署与热加载在应用运行的时候升级软件,无需重新启动的方式有两种,热部署和热加载.它们之间的区别是:(1).部署方式: 热部署在服务器运行时重新部署项目.热加载在运行时重新加载cl ...

  9. Python学习第二十一课——Mysql 对数据库的基本操作

    数据库操作(DDL) 在数据库下创建表(create_table) 创建表代码块: CREATE TABLE employee( id TINYINT PRIMARY KEY auto_increme ...

  10. Update(Stage4)：Structured Streaming_介绍_案例

    1. 回顾和展望 1.1. Spark 编程模型的进化过程 1.2. Spark 的 序列化 的进化过程 1.3. Spark Streaming 和 Structured Streaming 2. ...