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" ...
随机推荐
- JupyterLab远程访问配置方法（CentOS7）
下载 Anaconda3安装包,并执行安装命令: bash Anaconda3-2019.07-Linux-x86_64.sh 确定安装并初始化: Do you wish the installer ...
- Linux虚拟机(CentOS)安装gcc， g++
1. 确保自己的虚拟机联网 点击那个三角形可以选择连接网络 如果还是连不了网,参考https://www.cnblogs.com/xingbo/p/6100554.html 2.联网后,使用命令 ...
- java linux安装jdk，git, maven
jdk8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html mkdir ...
- 线段树——I hate it
[问题描述] 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模 ...
- laravel 邮箱认证
修改 User 模型,将 Laravel 自带的邮箱认证功能集成到我们的程序中 <?php namespace App\Models; use Illuminate\Notifications\ ...
- HDU 1372 Knight Moves（bfs）
嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1372 这是一道很典型的bfs,跟马走日字一个道理,然后用dir数组确定骑士可以走的几个方向, ...
- mcast_join_source_group函数
#include <errno.h> #include <net/if.h> #include <sys/socket.h> #define SA struct s ...
- windows下安装elasticsearch-6.4.3和elasticsearch-head插件
windows下安装elasticsearch-6.4.3和elasticsearch-head插件 博客分类: elasticsearch es ElasticSearch下载地址:https:/ ...
- redis实现哨兵机制
将cd /usr/local/redis/sentinel.conf复制到/usr/local/redis/etc/下 cd /usr/local/redis/ cp sentinel.conf /u ...
- 前端学习 之 CSS（一）
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...