vue 父组件调用子组件方法简单例子（笔记）
<!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 父组件调用子组件方法简单例子（笔记）的更多相关文章
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue+element ui项目总结点（四）零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
- reactjs--父组件调用子组件的内部方法（转载）
reactjs--父组件调用子组件的内部方法 发表于2016/10/11 9:21:37 965人阅读 1.引入相关js <script src="js/react.js" ...
随机推荐
- 未来的flags
完了大致一扫..... (1)P,NP,NPC,NP-Hard 二分图(2)二分图的判定 Tarjan(3)有向图的Tarjan算法(4)无向图的Tarjan算法 (5)A*算法 环套树(6)环套树的 ...
- P1028
一开始没看懂题,看了题解才明白的 = =.思路是,先找规律,会发现有重合部分,利用这些重合部分,写出递推公式. num = 0 时,只有 1 种组合: num = 1 时,只有 1 种组合: num ...
- DreamWeaver CC 中的回车
在Dreamweaver CC中换行有两种: 第一种是在设计视图中直接回车,对应的代码是<p>标签,即新生成一个段落. (注:在DreamWeaver CC编辑的代码中,按下回车相当于 ) ...
- SQLite3创建表及操作
SQLite 创建表 SQLite 的 CREATE TABLE 语句用于在任何给定的数据库创建一个新表.创建基本表,涉及到命名表.定义列及每一列的数据类型. 语法 CREATE TABLE 语句的基 ...
- IIS 部署 web service
1.在控制台检查 IIS 功能是否已经全部启用 2.重新注册IIS 3.设定程序池的正确版本
- 获取SqlServer存储过程定义的三种方法
declare @p_text varchar(max) SELECT @p_text= text FROM syscomments WHERE id = ( SELECT id FROM sysob ...
- Codeforces Round #576 (Div. 2) 题解
比赛链接:https://codeforc.es/contest/1199 A. City Day 题意:给出一个数列,和俩个整数\(x,y\),要求找到序号最靠前的数字\(d\),使得\(d\)满足 ...
- 「NOIP2018」赛道修建
传送门 Luogu 解题思路 一眼先二分(上界树的直径,下界最小边权),然后再考虑 \(\text{DP}\). 对于当前节点 \(u\),在它的所有儿子中分别返回一条匹配不完的长度最大的路径 \(M ...
- 解决 IDEA 下 struts.xml 中 extends="struts-default" 报红的问题
现象 在IDEA中配置struts.xml时 extends="struts-default" 报红,配置拦截器时属性无预选项提示,也爆红. struts.xml本身的配置并没有错 ...
- 攻防世界 web 进阶区 刷题记录
1.Training-WWW-Robots 题目提示了robots协议,直接访问robots.txt 继续访问fl0g.php 2.baby_web 题目描述:想想初始页面是哪个 百度搜了下,inde ...