父组件:
 
 
 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()的更多相关文章

  1. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  2. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  3. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  4. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  5. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  6. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  7. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  8. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  9. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

随机推荐

  1. gomod使用小结

    gomod使用小结 使用方法 把工程拷贝到$GOPATH/src之外 在工程目录下执行:go mod init {module name}该命令会创建一个go.mod文件 然后在该目录下执行 go b ...

  2. 在C++中,你真的会用new吗?

    摘要:"new"是C++的一个关键字,同时也是操作符.关于new的话题非常多,因为它确实比较复杂,也非常神秘. 本文分享自华为云社区<如何编写高效.优雅.可信代码系列(2)- ...

  3. Vue(12)组件的组织结构和组件注册

    组件的组织 通常一个应用会以一棵嵌套的组件树的形式来组织: 例如,你可能会有页头.侧边栏.内容区等组件,每个组件又包含了其它的像导航链接.博文之类的组件. 为了能在模板中使用,这些组件必须先注册以便 ...

  4. Ubuntu 之 Esc and CapsLK

    Ubuntu 更换 CapsLK 和 ESC 内容如下 // vim .xmodmap !! No Caps Lock clear lock !! Make Caps_lock an escape k ...

  5. Mybatis学习(6)与Spring MVC 的集成

    前面几篇文章已经讲到了mybatis与spring 的集成.但这个时候,所有的工程还不是web工程,虽然我一直是创建的web 工程.今天将直接用mybatis与Spring mvc 的方式集成起来,源 ...

  6. 《PHP扩展学习系列》系列分享专栏

    <PHP扩展学习系列>系列分享专栏   <PHP扩展学习系列>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/20177 ...

  7. Docker 基础备忘录

    Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...

  8. 「CF986F」 Oppa Funcan Style Remastered

    「CF986F」 Oppa Funcan Style Remastered Link 首先发现分解成若干个 \(k\) 的因数很蠢,事实上每个因数都是由某个质因子的若干倍组成的,所以可以将问题转换为分 ...

  9. python使用笔记11--时间模块

    1.时间模块常用方法 1 import time,datetime 2 #格式化好的时间2020-05-16 18:30:52 3 #时间戳1589616753 从unix元年(计算机发明的时间)到现 ...

  10. shell脚本编写规范和相关变量类型

    shell编程规范与变量    一.shell脚本概述    ① 什么是shell? Linux中有哪些shell?    ② shell的作用   ③ 用户的登录shell    ④ shell脚本 ...