vue中子组件触发父组件的方法
网上找了几种方法,下面这两种最实用,最明了
方法一:父组件方法返回是字符串或数组时用这种方法
子组件:
<template>
<button @click="submit">提交</button>
</template>
<script>
export default {
methods: {
submit: function () {
// 子组件中触发父组件方法ee并传值1
this.$emit('ee', '1')
}
}
}
</script>
父组件:
<template>
<editor id="editor" class="editor" @ee="cc"></editor>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
cc: function (str) {
if(str === 1){
this.text = '中国'
} else {
this.text='美国'
}
}
}
}
</script>
方法二:父组件方法返回是boolean类型时用这种方法
子组件:
<template>
<button @click="submit">提交</button>
</template>
<script>
export default {
props: {
validate: {
type: Function,
default: null
}
},
methods: {
submit: function () {
// 子组件触发父组件方法goValidate并传值data
let data = { newName:"张三", oldName:"李四" }
if (!that.validate(data)) {
console.log('新名:'+data.newName)
}
}
}
}
</script>
父组件:
<template>
<editor id="editor" class="editor" :validate="goValidate"></editor>
</template>
<script>
export default {
methods: {
goValidate: function (data) {
let newName = data.newName
if (newName.length < 1) {
layer.msg('命名不能为空,请重新输入!', { icon: 7 })
return false
}
return true
}
}
}
</script>
vue中子组件触发父组件的方法的更多相关文章
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- vue父组件传值和子组件触发父组件方法
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...
- vue组件之子组件和父组件
在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式
vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...
随机推荐
- 若依框架. 仿ThymeLeaf前端SelectDictLable方法
在framework项目下新增所需服务
- JsonResponse和HttpResponse
1.联系 JsonResponse继承HttpResponse 2.区别 JsonResponse 数据类型装自动换成json字符串并相应到前端,传到前端的是数据类型而非json字符串 HttpRes ...
- objectarx 按比例分割封闭多段线
测试结果:这个是按0.1,0.1,0.1,0.3,0.4的比例划分的. 插件描述:这个插件主要是选择一个多段线poly,设置poly的close属性为true,在poly任意一侧画一条长线line(l ...
- [bzoj4443] [loj#2006] [洛谷P4251] [Scoi2015]小凸玩矩阵
Description 小凸和小方是好朋友,小方给小凸一个 \(N \times M\)( \(N \leq M\) )的矩阵 \(A\) ,要求小秃从其中选出 \(N\) 个数,其中任意两个数字不能 ...
- 第二阶段冲刺个人任务——three
今日任务: 优化统计个人博客结果页面的显示. 昨日成果: 优化作业查询结果,按学号排列.
- CSS基础应用总结
目录 CSS 样式笔记 文字水平居中和垂直居中 如何设置a标签不带下划线 控件右对齐 div上下居中 控件左右居中 控件展示在同一行 设置文字超出部分...显示 CSS 样式笔记 文字水平居中和垂直居 ...
- idea怎么关闭项目
原文地址:https://jingyan.baidu.com/article/a3a3f8112169e78da2eb8a8d.html idea关闭项目可以按File-CloseProject按钮实 ...
- 【原创】(一)Linux进程调度器-基础
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- linux开机无法进入桌面直接进入initramfs模式的问题修复
可能是因为关机异常导致磁盘错误. kali linux升级到2019.4版本之后出现过好几次异常关机导致直接进入initramfs的模式,无法进入系统桌面,网上的办法基本上也都是无效的,前几次翻了很多 ...
- 尼姆博弈+SG函数
博弈这个东西真的很费脑诶.. 尼姆博奕(Nim Game):游戏者轮流从一堆棋子(或者任何道具)中取走一个或者多个,最后不能再取的就是输家.当指定相应数量时,一堆这样的棋子称作一个尼姆堆 当n堆棋子的 ...