子组件

<body>
<div v-on:click="test"></div> <script>
export default {
data(){
return {
data:"我是子组件传递数据给父组件"
}
},
methods:{
test:function(){
this.$emit('list',this.data) // $emit 有2个参数 第一个是监听父组件事件,第二个是传递的数据
}
} }
</script>
</body> //父组件 <body>
<child v-on:list="events"></child>
<script>
import child from "./child"
export default{
methods:{
events:function(data){
console.log(data) // data就是子组件传递过来的参数
}
},
components:{
child
}
}
</script>
</body>

  

vue 子组件传递数据跟父组件的更多相关文章

  1. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  2. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  3. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  4. vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

  5. layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...

  6. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  8. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  9. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

随机推荐

  1. jquery ztree 刷新后记录折叠、展开状态

    ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.d ...

  2. 转!!spring @component 详解 默认初始化bean的名字 VNumberTask类 就是 VNumberTask

    参考链接:信息来源 今天碰到一个问题,写了一个@Service的bean,类名大致为:CUser xml配置: <context:component-scan base-package=&quo ...

  3. python模拟websocket握手过程中计算sec-websocket-accept

    背景 以前,很多网站使用轮询实现推送技术.轮询是在特定的的时间间隔(比如1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给浏览器.轮询的缺点很明显,浏览器需要不断的向服 ...

  4. 使用scikit-learn 估计器分类

    本章的几个概念: 估计器(estimator) 用于分类.聚类和回归分析          转换器(transformer):用于数据预处理回来数据转换          流水线(pipeline): ...

  5. Django 基础篇章

    Django 紧紧地遵循这种 MVC 模式,可以称得上是一种 MVC 框架. 以下是 Django 中 M.V 和 C 各自的含义: M ,数据存取部分,由django数据库层处理. V ,选择显示哪 ...

  6. uva10537 dijkstra + 逆推

    21:49:45 2015-03-09 传送 http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8& ...

  7. Java Character 类

    Character 类用于对单个字符进行操作. Character 类在对象中包装一个基本类型 char 的值 实例 char ch = 'a'; // Unicode 字符表示形式 char uni ...

  8. [one day one question] iphone6 plus h5页面滑动莫名卡

    问题描述: iphone6 plus h5页面滑动莫名卡,这怎么破? 解决方案: 比较奇葩的问题,在找不到任何问题的情况下,可以考虑在下发现的解决方案,html,body未添加height: 100% ...

  9. [调参]batch_size的选择

    链接:https://www.zhihu.com/question/61607442/answer/440944387 首先反对上面的尽可能调大batch size的说法,在现在较前沿的视角来看,这种 ...

  10. Axios 使用采坑经验

    报错信息:Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL 解 ...