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> & ...
随机推荐
- Linux安装python和更新pip
一.安装python 1.安装依赖包 1).安装gcc 通过gcc --version 查看,若没有则安装gcc yum -y install gcc 2).安装其他依赖包 yum -y instal ...
- Django 导入配置文件
from django.conf import settings
- Jenkins配置邮件发送测试报告
前言 在之前的文章(Jenkins自动执行python脚本输出测试报告)中,我们已成功实现利用Jenkins自动执行python脚本,输出并可直接在界面上查看测试报告,这里我们还差最后一步,我们需要将 ...
- JS-09-数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- UML--->活动图梳理
活动图梳理 活动图 概述 活动图是UML用于对系统的动态行为建模的另一种常用工具,它描述活动的顺序,展现从一个活动到另一个活动的控制流,常常用于描述业务过程和并行处理过程,活动图在本质上是一种流程图. ...
- vscode打开文件,中文显示乱码(已解决)
之前使用vscode打开keil的文件后,发现显示乱码,网上查找资料发现大多是这种方法:将files.autoGuessEncoding改为true,但是并没有用. 发现第二种方法为:在vscode中 ...
- Git详解之Git起步
前言 本章介绍开始使用 Git 前的相关知识.我们会先了解一些版本控制工具的历史背景,然后试着让 Git 在你的系统上跑起来,直到最后配置好,可以正常开始开发工作.读完本章,你就会明白为什么 Git ...
- SpringBoot 的不同
这些在写前端页面的时候,ssm框架中,在页面做出修改之后,保存一下,重新刷新一下浏览器页面就发生了更新 但是sprigBoot中好像不一样,好像是需要对页面进行重新编译一下,浏览器页面才会发生变化 ( ...
- 释放innodb空间
记一次MySQL运维 [root@b2btest ~]# free -h total used free shared buffers cached Mem: 125G 124G 780M 13M 2 ...
- javabst1an
(单选题)下列概念中不包括任何实现,与存储空间没有任何关系的是() A)类 B)接口 C)抽象类 D)对象 正确答案为:B解析:接口是一种只含有抽象方法或常量的一种特殊的抽象类,因为接口不包括任何实现 ...