Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件
以下是例子:
father.vue 父组件
<template>
<div>
<child @newNodeEvent="getChildData" />
</div>
</template>
<script>
import child from './components/child'
export default {
components: {
child
},
methods: {
getChildData(value) {
alert(value)
}
}
}
</script>
child.vue 子组件
<template>
<div>
<input type="button" @click="toFather" value="子传父" />
</div>
</template> <script>
export default {
methods: {
toFather() {
this.$emit('newNodeEvent', '子元素到父元素')
}
}
}
</script>
Vue子组件传递数据给父组件的更多相关文章
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vue $emit $on 从子组件传递数据给父组件
原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
- layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层
最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
随机推荐
- C# 捕获全局异常
一.在Winform程序中捕获全局异常 在winfrom中我们需要了解Application对象中的两个事件 ①Application.ThreadException 事件--当UI线程中某个异常未被 ...
- Java ——Number & Math 类 装箱 拆箱 代码块
本节重点思维导图 当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double 等 int a = 5000; float b = 13.65f; byte c = 0 ...
- Learn Python the hard way, ex45 对象、类、以及从属关系
#!/usr/bin/python #coding:utf-8 # animal is-a object(yes,sort of sonfusing)look at the extra credit ...
- locale报错,显示中文乱码
locale: Cannot set LC_CTYPE to default locale: No such file or directorylocale: Cannot set LC_MESSAG ...
- POJ-1064.Cablemaster.(二分法枚举值求最优值)
题目链接 本题大意:给你n个长度为value[ i ]的长木板,让你切割成为等长的k份,问你切割的最大长度是多少. 本题思路:其实很容易可以想到先找到一个上界和一个下界,开始枚举里面的所有长度,取最长 ...
- VBA中Let与Set的区别
Let与Set的区别 1.在“类模块”中 Property Let 语句 在Class块中,是给普通变量进行赋值操作的Property,该种Property将不能在其前面使用Set,因而将不能用户对对 ...
- 百度文档,用Python一键免费下载
百度文库下载需要券,或者vip才能下载 Vip价格高,偶尔下载一次不划算. 不下载复制?不好意思复制也需要vip否则只能一次复制两行. 如何才能以最低成本获取到百度文库里的文档内容呢? 当然是用Pyt ...
- Django基础之简介(二)
三板斧 from django.shortcuts import render,HttpResponse, redirect HttpResponse # 返回字符串 urls: urlpatte ...
- 前端开发HTML&css入门——CSS的文本格式化
长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...
- Nodejs的模块化
Node.js中的模块化 好处: 复用性高,一次定义,多次使用 前端模块化 AMD AMD的实现需要使用 require.js CMD CMD的实现需要使用 sea.js [ 不更新 ] Common ...