<template>
<h3>CompA</h3>
<component-b :onfun="dateFun"></component-b>
<p>{{msg}}</p>
</template> <script>
import ComponentB from "@/components/ComponentB.vue";
export default {
name: "ComponentA",
components: {ComponentB},
data(){
return{
msg:"a"
}
},
methods:{
dateFun(data){
console.log(data)
this.msg=data
}
}
}
</script> <style scoped> </style>
<template>
<p>{{onfun('传递数据')}}</p>>
</template> <script>
export default {
name: "ComponentB",
props:{
onfun:Function
}
}
</script> <style scoped> </style>

vue-test4 -------组件之间的数据传递的更多相关文章

  1. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  2. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  3. Vue之组件之间的数据传递

    Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...

  4. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  5. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  6. (转)Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  7. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  8. Angular06 组件、模块、父子组件之间的数据传递

    1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...

  9. vue 组件之间的数据传递

    父组件传数据给子组件 创建数据 获取json数据 子组件传数据给父组件 1. 子组件使用$emit监听数据 getAreaValues(){ this.$emit('getAreaValues', { ...

  10. vue2.0 组件之间的数据传递

    组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog= ...

随机推荐

  1. Java将MySQL建表语句转换为SQLite的建表语句

    Java将MySQL建表语句转换为SQLite的建表语句 源代码: package com.fxsen.platform.core.util; import java.util.HashMap; im ...

  2. Pandas 使用教程 JSON

    目录 JSON 转换为 CSV 简单 JSON 从 URL 中读取 JSON 数据: 字典转化为 DataFrame 数据 内嵌的 JSON 数据 复杂 JSON Pandas 可以很方便的处理 JS ...

  3. Vue【原创】日历组件Calendar

    最近项目中封装了一个日历组件,用于节假日管理,支持输入默认选中的日期,选择管理日期. 效果图: calendar组件: 1 <template> 2 <div class=" ...

  4. 使用API数据接口获取商品详情数据的流程

    API数据接口是开发者获取第三方平台数据的一种方式,使用API接口可以快速地获取海量的商品详情数据,相比其他方式更加高效.实时.下面将介绍使用API数据接口获取商品详情数据的主要流程和步骤: 申请AP ...

  5. ThreadLocal:线程中的全局变量

    最近接了一个新需求,业务场景上需要在原有基础上新增2个字段,接口新增参数意味着很多类和方法的逻辑都需要改变,需要先判断是否属于该业务场景,再做对应的逻辑.原本的打算是在入口处新增变量,在操作数据的时候 ...

  6. 使用GPU搭建支持玛雅(Maya)和Adobe AI,DW,PS的职校云计算机房

    背景 学校为职业学校,计算机教室需要进行Maya.Adobe Illustrator.Adobe Dreamweaver.Adobe PhotoShop等软件的教学.每个教室为35用户.资源需求为4核 ...

  7. Vue3中的几个坑,你都见过吗?

    Vue3 目前已经趋于稳定,不少代码库都已经开始使用它,很多项目未来也必然要迁移至Vue3.本文记录我在使用Vue3时遇到的一些问题,希望能为其他开发者提供帮助. 1. 使用reactive封装基础数 ...

  8. python基础:集合(set)字典(direction)介绍

    三.字典(dict) 1.字典的创建赋值创建字典In [2]: d = {1,True,"hello"} In [3]: type(d)Out[3]: set #字典由key和va ...

  9. SQL语句简单入门

    SQL语句速查 创建部门表 deptno dname location 1 技术部 23楼 create table dept --dept部门 ( deptno int primary key, - ...

  10. destoon根据标题删除重复数据

    因为采集数据比较庞大,难免出现重复数据,所以写了一个根据标题进行删除重复数据的mysql命令,需要的朋友可以使用. 1 2 3 4 DELETE from destoon_article_36 whe ...