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:子组件能够改变父组件的值,是共享的,和父操作是 ...
随机推荐
- [Google Guava] 12-数学运算
原文链接 译文链接 译者:沈义扬 范例 1 int logFloor = LongMath.log2(n, FLOOR); 2 int mustNotOverflow = IntMath.checke ...
- 006_linuxC++之_引用
1. 什么是“引用”?申明和使用“引用”要注意哪些问题? 答:引用就是某个目标变量的“别名”(alias),对应用的操作与对变量直接操作效果完全相同.申明一个引用的时候,切记要对其进行初始化.引用声明 ...
- 005_linuxC++之_指针的引入
(一)直接看代码 #include <iostream> using namespace std; int add(int a){ a = a + ; return a; } int ad ...
- 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753 背景不多介绍了,直接上代码. ...
- ueditor自动上传Word中的图片
如何做到 ueditor批量自动上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//E ...
- 1625: 【例 1】反素数 Antiprime
1625: [例 1]反素数 Antiprime [题目描述] 原题来自:POI 2001 如果一个大于等于 1 的正整数 n,满足所有小于 n 且大于等于 1 的所有正整数的约数个数都小于 n 的约 ...
- 在AspNetCore3.0中使用Autofac
1. 引入Nuget包 Autofac Autofac.Extensions.DependencyInjection 2. 修改Program.cs 将默认ServiceProviderFactory ...
- oracle中查询某个库中所有的表以及所占的表空间大小
1. 查某一用户下的表select SEGMENT_NAME,TABLESPACE_NAME,sum(BYTES/1024/1024)||'M' from USER_extents where SEG ...
- 【Robot Framework 项目实战 02】使用脚本生成统一格式的RF关键字
背景 在微服务化的调用环境下,测试数据及接口依赖的维护是一个问题,因为依赖的接口和数据可能不在同一个服务下,而这相关的多个服务往往是不同人员来测试的. 因此为了节省沟通成本,避免关键字的重复冗余.所以 ...
- 走进JavaWeb技术世界2:JSP与Servlet的曾经与现在
转载自:码农翻身 转自: 刘欣 码农翻身 1周前 我是Servlet, 由于很多框架把我深深地隐藏了起来,我变得似乎无关紧要了,很多人也选择性的把我给遗忘了. 其实,我还活得好好的呢, 只不过是从前台 ...