vue父组件促发子组件中的方法
实现在父组件中促发子组件里面的方法
子组件:
<template>
<div>
我是子组件
</div>
</template> <script>
export default {
name: "child",
methods: {
parentHandleclick(e) {
console.log(e)
}
}
</script>
父组件:
<template>
<div>
<button @click="clickParent">点击我促发子组件方法</button>
<child ref="mychild"></child>
</div>
</template> <script>
import Child from './child';
export default {
name: "parent",
components: {
child: Child
},
methods: {
clickParent() {
this.$refs.mychild.parentHandleclick("父组件调用子组件方法");
}
}
}
</script>
vue父组件促发子组件中的方法的更多相关文章
- vue父组件如何向子组件中传递数据?
原文地址 props传参 父组件: <template> <parent> <child :list="list"></child> ...
- vue中父组件给子组件传值,子组件给父组件传值
1.父组件传给子组件 父元素中 子元素中(通过props传值) 2.子组件传给父组件 子元素中(this.$emit(传过去的名字,传的参数)) 父元素中 通过changeShow的参数data 把修 ...
- vue中使用ts后,父组件获取执行子组件方法报错问题
一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
随机推荐
- day59:Linux:编辑工具vim&文件类型&文件属性
目录 1.Linux编辑工具vim 2.Linux文件类型 3.Linux文件属性 4.今日份Linux练习题 Linux编辑工具vim 1.什么是vim 文本文件的编辑工具, 和windows的n ...
- PuTTY 连接 linux 服务器执行 make menuconfig 乱码问题解决
PuTTY 连接 linux 服务器执行 make menuconfig 时可能出现乱码,如下图所示: 有两个方法解决这个问题: 方法一: 修改 PuTTY 配置如下图所示: 方法二: 在 -/.ba ...
- 【typedef】Type definitions 自定义类型
- “酒香也怕巷子深” Smartflow-Sharp 工作流
导语 老话说得好,"酒香不怕巷子深"可是我又不是什么大咖,写得再好也没人知道.所以我今天准备再写写我的工作流组件,写得不好还请大家见谅.写文章对于我来说,有点感觉"茶壶里 ...
- springCloud项目搭建
新建父maven项目 groupId:pers.xzp.springCloudartifactId:springCloud 父项目中仅仅需要一个pom文件,用于管理模块的依赖统一.继承等 编辑pom文 ...
- 二进制安装MySQL-5.7.28
系统基础优化 #更改主机名 hostname msyql echo "msyql" >/etc/hostname #修改字符集 echo "LANG="z ...
- 2017年 实验三 C2C模拟实验
[实验目的] 掌握网上购物的基本流程和C2C平台的运营 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. (3).奥派电子商务应用软件 [知识准备] 本实验需要的理论知识:C2C ...
- 【面试题】java一般
1.取最大最小值 public static int maxOrMinTest(List<Integer> list){ Integer[] integers = list.toArray ...
- Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
- 晋城6397.7539(薇)xiaojie:晋城哪里有xiaomei
晋城哪里有小姐服务大保健[微信:6397.7539倩儿小妹[晋城叫小姐服务√o服务微信:6397.7539倩儿小妹[晋城叫小姐服务][十微信:6397.7539倩儿小妹][晋城叫小姐包夜服务][十微信 ...