vue传值 ---- >> 父传子,props()

1 <template>
2 <div class="comment">
3 <div>comment</div>
4 <div class="btn">
5 <router-link :to='{name:"shopping", query: { id: userID}}' @click="tiao()" tag="span" >跳转</router-link>
6 </div>
7 <shopping :message="HelloWorld"></shopping>
8 </div>
9 </template>
10 <script>
11 import shopping from '../shopping/shopping'
12 export default {
13 name:"comment",
14 components:{shopping},
15 data() {
16 return {
17 userID:1,
18 HelloWorld:[
19 {id:"4343"},
20 {id:"gfgf"},
21 {id:"jhj8787"},
22 ]
23 }
24 },
25 methods: {
26 tiao(){
27 // console.log(this.$route.query.id)
28 }
29 },
30
31 }
32 </script>
33 <style lang="stylus" scoped>
34 .comment
35 margin 100px
36 .btn
37 margin-top 20px
38 span
39 cursor pointer
40 border 1px solid #ccc
41 height 20px
42 line-height 20px
43 color #000
44 padding 20px 30px
45 border-radius 10px
46 margin-bottom 50px
47 display block
48 </style>

1 <template>
2 <div>
3 <!-- <div>子页面</div> -->
4 <div class="mess">
5 <div v-for="(item,index) in message" :key="index">
6 {{item.id}}
7 </div>
8 </div>
9 </div>
10 </template>
11 <script>
12 export default {
13 name:"shopping",
14 props: {
15 message:{
16 type : Array,
17 default: function() {
18 return []
19 }
20 },
21 },
22 data() {
23 return {
24
25 }
26 },
27 created(){
28 // console.log(this.message)
29 }
30 }
31 </script>
vue传值 ---- >> 父传子,props()的更多相关文章
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
随机推荐
- Linux中使用QT读取并显示温度传感器数值
环境: Ubuntu 16.04 64 bit QT5.13.1/QT5.12 原理 对于Linux来说一切都是文件,温度传感器也是个文件,如果要获取某个温度传感器的数值,可以读取相应的文件,Linu ...
- Local dimming algorithm in matlab
LED局部背光算法的matlab仿真 最近公司接了华星光电(TCL)的一个项目LCD-BackLight-Local-Diming-Algorithm-IP ,由于没有实际的硬件,只能根据客户给的论文 ...
- DL基础补全计划(一)---线性回归及示例(Pytorch,平方损失)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- kubernetes的网络代理模式
在k8s中,如果想ping svc以及ip,发现无法ping通,使用测试环境为k8s 1.6,后来k8s升级到1.12版本,发现ping svc以及ip可以ping通,这里分析一下原因. 后来发现是由 ...
- 温故知新,.Net Core遇见Digital Signature(MD5/RSA/SM),微服务签名机制设计
什么是数字签名(Digital Signature) 数字签名(Digital Signature)是只有信息的发送者才能产生的别人无法伪造的一段数字串,这段数字串同时也是对信息的发送者发送信息真实性 ...
- 12.10、elk实用案例
1.架构图: 服务器名称 ip地址 controller-node1(主) 172.16.1.90 slave-node1(从) 172.16.1.91 2.安装filebeat: filebeat不 ...
- [Usaco2018 Dec]Teamwork 题解
题目描述 题目描述 在Farmer John最喜欢的节日里,他想要给他的朋友们赠送一些礼物.由于他并不擅长包装礼物,他想要获得他的 奶牛们的帮助.你可能能够想到,奶牛们本身也不是很擅长包装礼物,而Fa ...
- IDEA详细配置+优秀插件
目录 IDEA破解 Settings配置 配置 settings 字体 关闭IDEA更新 设置IDEA打开为项目选择界面 自动导入包配置 显示方法的分割线 滚轮设置字体大小 智能提示忽略大小写 Tab ...
- Kubernetes全栈架构师(Kubeadm高可用安装k8s集群)--学习笔记
目录 k8s高可用架构解析 Kubeadm基本环境配置 Kubeadm系统及内核升级 Kubeadm基本组件安装 Kubeadm高可用组件安装 Kubeadm集群初始化 高可用Master及Token ...
- bcprov-jdk15-145.rar
javapdf文件操作,加密包 bcprov-jdk15-145.rar https://files.cnblogs.com/files/blogs/692137/bcprov-jdk15-145.r ...