<!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. cc攻击怎么防御,如何防止cc攻击?

    当我们访问一个网站时,如果网站页面越简单,访问速度越快,页面越漂亮,加载速度就越慢,因为要加载更多东西,服务器压力也会比较大.cc攻击就是利用这种弱点,使用大量代理服务器,对网站进行攻击,消耗网站服务 ...

  2. 【MySQL】完整性约束

    " 目录 not null default unique 单列唯一 联合唯一 primary key 单列主键 复合主键 auto_increment 步长与偏移量 foreign key ...

  3. Centos610安装Jdk1.8

    1.下载JDK 下载:  https://pan.baidu.com/s/15TYsE_wfSb48pS4SpUQKHA 提取码:fsx6 2.上传安装包 上传到linux 并拷贝到/opt/jdk目 ...

  4. Navicat连接远程主机（腾讯云服务器）的mysql失败，解决

    赋予所有用户远程连接的权限,重启mysql即可连接成功: grant all privileges on . to 'root'@'%' identified by 'admin'; systemct ...

  5. 修正SQLSERVER package连接

    drop table #temp_mt; --WITH XMLNAMESPACES ('www.microsoft.com/SqlServer/Dts' AS DTS) SELECT ROW_NUMB ...

  6. UIResponder的API

    @property(nonatomic, readonly) UIResponder *nextResponder; 返回响应者链中的下一个响应者,或者nil如果没有下一个响应者. @property ...

  7. 安装完 Ubuntu 16.04.1，重启出现[sda] Assuming drive cache: write through的问题

    重装了一下ubuntu,安装成功后重启出现了这个问题 刚开始以为是重启慢,就没在意这么多,可是我等了半个小时,(我特么的真闲,其实是忙别的忘了),还不行,咦,然后我就去找了找问题,哈哈哈哈 看图说话, ...

  8. dfs & bfs总结

    dfs 最简单的三种形式递归总结 bfs 百度https://baike.baidu.com/item/%E5%AE%BD%E5%BA%A6%E4%BC%98%E5%85%88%E6%90%9C%E7 ...

  9. 【原】tcp三次握手和四次挥手

  10. 【PAT甲级】1049 Counting Ones (30 分)（类似数位DP思想的模拟）

    题意: 输入一个正整数N(N<=2^30),输出从1到N共有多少个数字包括1. AAAAAccepted code: #define HAVE_STRUCT_TIMESPEC #include& ...