<!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. php源码加密--screw plus

    screw plus是一个开源的php扩展,作用是对php文件进行加密,网络上提供php加密的服务很多,但大多都只是混淆级别的加密,被人拿到加密文件问只要有足够耐心就能破解,与之不同的是,screw ...

  2. python网络爬虫之解析网页的XPath(爬取Path职位信息)[三]

    目录 前言 XPath的使用方法 XPath爬取数据 后言 @(目录) 前言 本章同样是解析网页,不过使用的解析技术为XPath. 相对于之前的BeautifulSoup,我感觉还行,也是一个比较常用 ...

  3. layer.open({}) 子页面传参并调用父页面的方法

    闲话少说先看效果!!! 说明适用场景:在a.jsp页面,点击查看一个文件,layer.open弹出b.jsp页面,在b.jsp页面可以修改文件的名称(其实是去改了数据库),但是关闭弹窗的后,要求不刷新 ...

  4. 学校实训作业：Java爬虫（WebMagic框架）的简单操作

    项目名称:java爬虫 项目技术选型:Java.Maven.Mysql.WebMagic.Jsp.Servlet 项目实施方式:以认知java爬虫框架WebMagic开发为主,用所学java知识完成指 ...

  5. 字符串操作函数：JSON.parse()与JSON.stringify()的区别，字符串转数组 str.split(',')，数组转字符串String(),以及对象拼接合并Object.assign()，数组拼接合并concat()

    1.JSON.parse()  把字符串转化为 json 对象 例如 arr={ , "site":"www.runoob.com" } var obj = J ...

  6. maven搭建ssm 完整过程

    https://blog.csdn.net/qq_28008917/article/details/79755935

  7. 通过js检测浏览器支持的字体，从而显示支持的字体，让用户选择。

    http://www.zhangxinxu.com/wordpress/2018/02/js-detect-suppot-font-family/ 本文根据张鑫旭文章. 字体函数: var dataF ...

  8. ZooKeeper 相关知识

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zhang123456456/articl ...

  9. JAVAWeb问题总结（持续更新）

    1.在JSP页面头部,出现如下错误: 错误文本: Multiple annotations found at this line: - The superclass "javax.servl ...

  10. [IDEA] Idea复制文件到项目一直updating indices的问题

    通常我们在开发JavaWeb项目的时候,都需要先将网页写好,在进行复制到web目录下,如果里面包含了很多的资源文件,就会造成一直updating indices. 方法一: 这是因为项目需要对web目 ...