网上找了几种方法,下面这两种最实用,最明了

方法一:父组件方法返回是字符串或数组时用这种方法

子组件:

<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中子组件触发父组件的方法的更多相关文章

  1. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  2. vue父组件传值和子组件触发父组件方法

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...

  3. vue组件之子组件和父组件

    在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...

  4. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  6. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  7. VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

    目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...

  8. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  9. vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式

    vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...

随机推荐

  1. Wordpress4.9.6 任意文件删除漏洞复现分析

    第一章 漏洞简介及危害分析 1.1漏洞介绍 WordPress可以说是当今最受欢迎的(我想说没有之一)基于PHP的开源CMS,其目前的全球用户高达数百万,并拥有超过4600万次的超高下载量.它是一个开 ...

  2. GP工作室—系统设计

    团队作业第二次作业--系统设计 问题 答案 这个作业属于哪个课程 软件工程 这个作业要求在哪里 作业要求 团队名称 GP工作室 这个作业的目标 对项目软件进行更为详细的系统性设计 按照本游戏的设计要求 ...

  3. airtest启用本地python环境的方法

    实现目标,air如果想引用第三方python库,则需要在本地python欢迎执行运行 1.打开设置,红色箭头处,选择本地python路径 2.安装air的两个核心库airtest和pocoui 安装方 ...

  4. ValueError: The field admin.LogEntry.user was declared with a lazy reference to 'system.sysuser', bu

    问题:已经在settings.py文件中注册过app仍旧提示没有安装,并且使用makegirations命令时会抛出如下异常. ValueError: The field admin.LogEntry ...

  5. Nginx(二) 常用配置

    全局配置段 # 允许运行nginx服务器的用户和用户组 user www-data; # 并发连接数处理(进程数量),跟cpu核数保存一致: worker_processes auto; # 存放 n ...

  6. Mybatis基础(二)

    Mybatis连接池 Mybatis连接池提供了三种配置方式,配置的位置在SqlMapConfig.xml的dataSource标签中,其type属性就是配置连接池的种类.type的可取值 1.POO ...

  7. python 不可变字典 inmutabledict的实现

    python inmutabledict的实现 关于在python中如何实现不可变字典的方法.早在pep416中,就建议python官方实现inmutabledict,但是官方否认了.理由主要是 根据 ...

  8. Python黑客编程知识点整理

    Python转义字符 转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \ ...

  9. Java中的代码点与代码单元

    在Java中,什么是代码点与代码单元? 代码点(Code Point):在 Unicode 代码空间中的一个值,取值 U+0000 至 U+10FFFF,代表一个字符. 其中U+0000到U+FFFF ...

  10. VS debug下为什么多此一举jmp函数地址?

    VS debug下为什么call 函数后,会jmp函数地址?多此一举? http://blog.csdn.net/viper/article/details/6332934 在写跑在main之前的时候 ...