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> & ...
随机推荐
- python 打印乘法表
for i in range(1, 10): for j in range(1, i+1): print('%s * %s = %s' % (i, j, i*j), end=' ') print('' ...
- GStreamer基础教程13 - 调试Pipeline
摘要 在很多情况下,我们需要对GStreamer创建的Pipeline进行调试,来了解其运行机制以解决所遇到的问题.为此,GStreamer提供了相应的调试机制,方便我们快速定位问题. 查看调试日志 ...
- 高通量计算框架HTCondor(五)——分布计算
目录 1. 正文 1.1. 任务描述文件 1.2. 提交任务 1.3. 返回结果 2. 相关 1. 正文 1.1. 任务描述文件 前文提到过,HTCondor是通过condor_submit命令将提交 ...
- 「 从0到1学习微服务SpringCloud 」09 补充篇-maven父子模块项目
系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」06 统一配置中心Spring Cloud Config 「 从0到1学习微服务SpringCloud 」07 RabbitM ...
- 机器学习环境配置系列二之cuDNN
1.下载cuDNN 前往: NVIDIA cuDNN home page. 进入下载 勾选Nvidia的协议复选框(流氓的选择,不勾选不能下载) 选择与安装的cuda版本一致的cudnn进行下载. 2 ...
- Windows环境下配置robotframework
Robot Framework安装准备 一.python3.6以上版本 安装过程中勾选“add python to path”,就可以自动配置好环境变量. 安装完成后在命令行输入python,如下图所 ...
- 团队项目—Beta版本冲刺(2/3)
团队信息 何全江(队长) 201731024218 胡志伟 201731024240 李元港 201731024232 孟诚成 201731024242 罗俊杰 201731024226 雷安勇 20 ...
- 创建dynamics CRM client-side (十二) - HTML Web Resource
HTML Web Resource是我们经常使用的一个功能. 第一步, 我们先创建好一个HTML. 接下来,我们要在web resource中创建新的html web resource. 我们在tex ...
- Docker获取镜像报错docker: Error response from daemon
docker: Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled ...
- 小白学Java:RandomAccessFile
目录 小白学Java:RandomAccessFile 概述 继承与实现 构造器 模式设置 文件指针 操作数据 读取数据 read(byte b[])与read() 追加数据 插入数据 小白学Java ...