vue---子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件
Hello.vue 子组件
ps:App.vue 父组件
Hello.vue 子组件 <!--App.vue :--> <template>
<div id="app">
<hello @newNodeEvent="parentLisen" />
</div>
</template> <script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
</script> <!--Hello.vue :--> <template>
<div class="hello">
<input type="button" name="" id="" @click="chilCall()" value="子调父" />
</div>
</template> <script>
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
</script>
vue---子调父 $emit (把子组件的数据传给父组件)的更多相关文章
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
		
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
 - 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
		
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
 - vue 子组件把数据传递给父组件
		
<div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...
 - vue子组件使用自定义事件向父组件传递数据
		
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
 - Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性
		
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
 - vue $emit 父组件与子组件之间的通信(父组件向子组件传参)
		
1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...
 - Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作
		
需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...
 - 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
		
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...
 - 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
		
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
 
随机推荐
- java四大名著及idea常用插件
			
四大名著 <Java编程思想><Think in Java> https://github.com/quanke/think-in-java https://github.co ...
 - 重磅!滴滴跨端框架Chameleon 1.0正式发布
			
滴滴在 GitHub 上开源的跨端解决方案 Chameleon(简写 CML)正式发布 1.0 版本,中文名卡梅龙:中文意思变色龙,意味着就像变色龙一样能适应不同环境的企业级跨端整体解决方案,具有易用 ...
 - eclipse的maven中需要把jar的包文件登入到自己的仓库里面的操作
			
问题的描述 从别人那拿到了Java maven的工程,导入自己的eclipse中之后编译的时候出现包文件找不到,之后把工程进行maven的update project之后,pom.xml文件出现错误, ...
 - context.xml文件配置
			
<?xml version='1.0' encoding='utf-8'?> <Context> <WatchedResource>WEB-INF/web.xml& ...
 - [转帖]QC 和 PD:关于你所不知道的快充
			
QC 和 PD:关于你所不知道的快充 http://www.sohu.com/a/276214250_465976 2018-11-18 06:02 当我们使用支持 PD 或者 QC 快充协议的电源适 ...
 - tp5功能模块添加与调试
			
在原先完善的功能基础上添加比如导出列表为excel ,一下子把所有属性写全了,出了问题,不好查找问题在哪? 所以遇到这种问题,需要最简单的测试.比如新建一个mysql表内就放一列一行数据.减少代码量, ...
 - python基础学习(九)
			
19.解包 # 解包 unpacking user1 = ["张三", 21, "1999.1.1"] # tuple 类型 user2 = ("李四 ...
 - IIS不能下载config配置文件的解决方法
			
之前作程序升级的时候,需要从服务端下载后缀为config的配置文件,结果程序抛出404异常.后来百度才知道,是IIS禁止下载config文件的原因.在这里记录一下解决方法. 在我的电脑,右键管理,打开 ...
 - 设置Echarts图例位置
			
只需要修改如下几个示数即可: ①x:可以选择左(left).右(right).居中(center)②y:可以选择左(left).右(right).居中(center)③padding:[0,30,0, ...
 - 前端require代码抽离小技巧
			
DEMO 文件目录结构 plugin.js // /CommonJS规范 // var exports = module.exports; exports.test = function () { c ...