Vue父子组件传值$parent , ref,$refs,props大总结
子组件:
<template>
<div class="child">
<slot name='meiyong'></slot>
<p >我是子组件哟 {{num}} {{ttttt}} {{nike}} 这是我独有的----->{{isChi}} </p>
<slot name="strong"></slot>
</div>
</template>
<script>
import Utils from '@/utils/utils'
export default {
props:['ttttt','nike'],
data(){
return {
num:" ",
isChi:'★子组件独有★'
}
},
mounted(){
//传值给父组件
this.$parent.runTime= Utils.formatDate(new Date(), "YYYY-MM-DD hh:mm:ss");
} }
</script>
<style lang="scss" scoped>
.child{
height: 5rem;
width: %;
background-color: skyblue;
text-align: center;
position: relative;
p{
height: 30px;
width: 800px;
display: block;
position: absolute;
top: ;
bottom: ;
left: ;
right: ;
margin: auto;
// transform: translate(-50%,-50%)
}
.parent{
color:greenyellow;
}
.strong{
position: absolute;
bottom: ;
left: %;
transform: translateX(-%);
color: darkmagenta;
}
}
</style>
父组件:
<template>
<div >
<!-- 父传子-->
<tc :ttttt='mongodb' :nike='nike' ref="toChild">
<template v-slot:meiyong >
<h1 class="parent">v-slot中的内容 没用?呵呵</h1>
</template>
<template v-slot:strong>
<h2 class="strong">你很强???{{runTime}} </h2>
</template>
</tc>
</div>
</template>
<script>
import testChild from '@/views/testChild'
export default {
data(){
return {
ttttt:'█我是父组件给child传的值█',
mongodb:'█我是MongoDB哟█',
nike:'███ just do ███',
runTime:'null'
}
},
mounted(){
let chi = this.$refs.toChild
console.log('chi===>',chi.isChi);
this.$refs.toChild.isChi = '我试试能不能修改子组件的值' // num不是传的值 所以要ref才能传
this.$refs.ttttt.num = ''
},
components:{
tc:testChild
}
}
</script>
<style lang="scss" scoped> </style>
Vue父子组件传值$parent , ref,$refs,props大总结的更多相关文章
- 一个故事讲懂vue父子组件传值
作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...
- VUE父子组件传值问题
一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...
- vue父子组件传值
1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
随机推荐
- date对象设置set
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Win10远程桌面 报错:CredSSP加密Oracle修正……
解决方法: 运行 gpedit.msc 本地组策略: 计算机配置>管理模板>系统>凭据分配>加密Oracle修正 选择启用并选择易受攻击. 参考: https://blog.c ...
- list,tuple,set,dict基础
list # @Auther : chen # @Time : 2018/4/26 19:55 # @File : list_ex.py # @SoftWare : PyCharm # list1 = ...
- VueCropper 图片裁剪
基于vue的图片裁剪vue-cropper 简小咖 关注 0.2 2018.12.12 15:42 字数 164 阅读 3900评论 1喜欢 3 vue-cropper官网http://xyxiao ...
- 51Nod 1701 最后的机会
1701 最后的机会 给定一字符串S,S非空,由小写字母组成,设v为S中元音字母的个数,c为辅音字母的个数."a", "e", "i", & ...
- pat 甲级 1064 ( Complete Binary Search Tree ) (数据结构)
1064 Complete Binary Search Tree (30 分) A Binary Search Tree (BST) is recursively defined as a binar ...
- List对象遍历时null判断逻辑梳理
凡是对集合list,set,map,数组等进行循环一定要判断是否为null,增强代码的健壮性.下面以list为例, 使用for循环遍历list对象,处理其中的元素时,需要对null值判断: ...
- Python进行Redis数据迁移
Python进行Redis数据迁移 由于开发时的误操作,导致redis数据损坏,所以需要进行redis的数据迁移,网上大佬的教程基本都是需要下载附加工具,亦或是需要一些复杂的操作,个人觉得麻烦还不如写 ...
- ubuntu hadoop安装
参考: https://wangchangchung.github.io/2017/09/28/Ubuntu-16-04%E4%B8%8A%E5%AE%89%E8%A3%85Hadoop%E5%B9% ...
- ArcGIS超级工具SPTOOLS-编号工具
1.1 整库更新BSM 输入一个MDB或GDB,将所有的要素类和表,按某个字段BSM,BSM不存在,会自动创建,从某个开始,顺序编号. 1.2 更新BSM 根据自己输入的多个表或要素,可以自己编号 ...