父传子

父容器

<template>
<div>
<zdy :module='test'></zdy>
</div>
</template> <script>
import zj from "./zj";
// 父传子
export default {
components:{
// 映射写法
'zdy':zj,
// 另一种写法 直接写
// zj,
},
data(){
return{
test:
}
}
}
</script>

子容器

<template>
<div>
<div v-html="module"></div>
</div>
</template> <script>
export default {
name: 'module',
// 数组形式
props: ['module'],
// 对象形式 这种 声明就要求 传过来的必须是 对象 规定了 type
// props: {
// seller: {
// type: Object
// }
// },
//默认值 如果 传过来的值为空 则取default 的默认值
//props:{value:[number,string],default:0}
}
</script>

子传父 (可以通过$on来回调$emit给父级的值)

父容器

<template>
  <div>
  <zdy @sedParentDate='receptionChildDate'></zdy>
  </div>
</template> <script>
import zj from "./zj";
// 子传父
export default {
components:{
// 映射写法
'zdy':zj,
// 另一种写法 直接写
// zj,
},
data(){
return{ }
},
methods:{
receptionChildDate(data){
console.log(data)
}
}
}
</script>

子容器

<template>
<div>
<div @click="childClick">点我</div>
</div>
</template> <script>
export default {
name: 'module',
// 数组形式
props: ['module'],
// 对象形式
// props: {
// seller: {
// type: Object
// }
// }, methods:{
childClick(){
// 子传值到父(外部调用内部事件)
this.$emit('sedParentDate','我是子组件传过来的值')
}
},
mounted () {
this.$on('sedParentDate', (data) => {
console.log('在自己这里打印出来', data) // 我是子组件传过来的值
})
}
}
</script>

Vue父子组件传值 | 父传子 | 子传父的更多相关文章

  1. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  2. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  3. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  4. Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

    Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...

  5. Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...

  6. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  7. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  8. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  9. VUE父子组件传值问题

    一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...

随机推荐

  1. Nest.js 守卫

    Docs: https://docs.nestjs.com/guards 当调用者具有足够的权限时,特定路由才可用 // app.guard.ts import { CanActivate, Exec ...

  2. curl HTTP Header

      对于"User-Agent", "Cookie", "Host"这类标准的HTTP头部字段,通常会有另外一种设置方法.curl命令提供了 ...

  3. IDEA多个服务打断点 各服务乱窜的问题

    Setting --> Build, Execution, Deployment --> Debugger 选中即可

  4. layer loading层 的设置

    /* shadeClose 类型:Boolean 默认:true,是否点击遮罩时关闭层 */ var tishi = layer.open({ shadeClose: false ,type: 2 , ...

  5. 谷歌浏览器(Chrome)禁止浏览器缓存 设置

    在开发项目期间用谷歌浏览器调试,他总是缓存我的css样式这个很气人啊,后经过摸索找到了方法,如下 先F12或者shift+ctrl+j 打开调试者工具,在找Network这个tab按钮,点击进入,勾选 ...

  6. vue脚手架---vue-cli

    开年第一篇 今天先讲一讲 vue-cli的安装 npm install vue-cli 可能需要很多的时间视网络环境而定, 如果长时间等待 也可以试试使用淘宝的镜像(cnpm)安装( npm inst ...

  7. Python学习之旅(三十五)

    Python基础知识(34):电子邮件(Ⅰ) 几乎所有的编程语言都支持发送和接收电子邮件 在使用Python收发邮件前,请先准备好至少两个电子邮件,如xxx@163.com,xxx@sina.com, ...

  8. JACKSON详解

    Jackson 框架,轻易转换JSON Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 前面有介绍过json-lib这个框架,在 ...

  9. 《Maven实战》文字版[PDF]

    从亚马逊买的电子书,导出来的,需要的下吧. 下面是截图: 除了代码部分有一点点不清楚之外,其他还是蛮清楚的. 下载地址: http://download.csdn.net/download/apple ...

  10. RoR - Creating and Modifying Table and Columns

    自动生成的id 被当作primary key来使用 timestamp method生成 created_at 与 updated_at columns create_table 和 drop_tab ...