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" ...
随机推荐
- 关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。
要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...
- django登陆界面报错InternalError at /admin/polls/question/add/
登陆界面报错信息如下: 改为输入英文,正确
- mysql取出字段数据的精度
$field = 'convert(avg(mood),decimal(4,0)) mood,convert(avg(hrv),decimal(4,0)) hrv,convert(avg(heart_ ...
- centos 6.5 升级到 python2.7
准备 centos6.5的python版本默认是2.6.6,可能有的时候我们需要升级到更高的版本,那就来动手升级下吧.我这里以2.7.8版本为例,根据实际需要选择升级版本即可. yum install ...
- mysql中date与datetime的区别
date类型可用于需要一个日期值而不需要时间部分时.MySQL 以 'YYYY-MM-DD' 格式检索与显示date值.支持的范围是 '1000-01-01' 到'9999-12-31'. datet ...
- Beego Learning Notes
Beego框架学习 1.1软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模 ...
- ES5-Object扩展方法
1.Object新增一个方法,Object.create();,用来以一个对象为基础创建另一个对象,新建的对象的__proto__指向基础对象 var obj = {name:'maycpou',a ...
- python2.7环境下升级pip3，及出错解决办法
执行 pip3 install --upgrade pip 进行升级 升级后若出现, Import Error:cannot import name main 是因为将pip更新为10.0.0后库里面 ...
- 02-12Android学习进度报告十二
今天学习了ListView的焦点问题,基本了解了ListView的使用内容. 首先可以为抢占了控件的组件设置:android:focusable="false" 只需为抢占了Lis ...
- 02-11Android学习进度报告十一
今天我学习了BaseAdapter优化的知识,主要是View方面的优化. 首先是复用复用ConvertView 代码示例: @Override public View getView(int posi ...