1. 前提&知识点

  1./components/Father.vue 是父组件, Son.vue 是子组件

  2.父组件像子组件通信

    props

2.组件通信

  1. 新增一个路由入口 /father(省略)

  2. components -> Father.vue 添加一组数据

export default {
name: "Father",
data() {
return {
father_list: ["第一章", "第二章", "第三章", "第四章"]
};
}
};

  3.父组件中调用,注册,引用子组件 

import Son from "./Son.vue";

  4. 注册组件

components: {
"son": Son
}

  5. 引用组件,绑定一个自定义的key值

<son :father_list="father_list"></son>

  6. 子组件通过props接收父组件传过来的值

export default {
data () {
name: 'Son'
return {
// list: ['第一章', '第二章', '第三章', '第四章']
}
},
props: ['father_list']
}

  7. 访问/father 路由

3. 完整代码

Father.vue

<template>
<div>
<h2>This is Father</h2>
<son :father_list="father_list"></son>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
name: "Father",
data() {
return {
father_list: ["第一章", "第二章", "第三章", "第四章"]
};
},
components: {
"son": Son
}
};
</script>

Son.vue

<template>
<div>
<ul>
<li v-for="item in father_list" :key='item'>{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
name: 'Son'
return {
// list: ['第一章', '第二章', '第三章', '第四章']
}
},
props: ['father_list']
}
</script>

  

【VUE】6.组件通信(一)父组件向子组件传值的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. vue组件通信之父组件主动获取子组件数据和方法

    ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...

  3. vue父组件引用多个相同的子组件传值

    没有什么问题是for 解决不了的,我一直深信这句话,当然这句话也是我说的 父组件引用多个相同的子组件传值问题 (这种情况很少遇到) 1 <template> 2 <div> 3 ...

  4. 关于Vue中,在方法中使用(操作)子组件获取到的数据

    已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created.mounted生命周期中使用的,只能在beforeUpdated或者updated获取到: 但是如果我们要使用这个数 ...

  5. artdialog4.1.7 中父页面给子页面传值

    artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...

  6. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  7. Vue组件通信之父传子

    一般情况下,子组件中无法直接使用父组件的变量.借助子组件的props选项可以实现这一点. 这里我将一个vue实例作为一个父组件: const app = new Vue({ el:'#div1', d ...

  8. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  9. 详解vue父组件传递props异步数据到子组件的问题

    案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...

  10. [转]详解vue父组件传递props异步数据到子组件的问题

    原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...

随机推荐

  1. Qlik Sense插件及QRS接口补充

    date: 2019-10-18 09:10:00 updated: 2019-10-18 15:18:00 Qlik Sense插件及QRS接口补充 1.插件 1.1 获取数据方式 理论上 Engi ...

  2. vue-cli axios ie9 问题

    vue在ie9中碰到的问题 最近我们的项目选择用vue来做开发,在这个过程我们还要兼容ie9这个坑,在这里我写一点我碰到的坑 开发选用:vue+vue-cli+axios+router+iview+m ...

  3. 走在深夜的小码农 Fourth Day

    Css3 Fourth Day writer:late at night codepeasant 学习大纲 一.emmet语法 1.简介 ​ Emmet语法的前身是Zen coding,它使用缩写,来 ...

  4. C#+Arduino Uno 实现声控系统完全实施手册

    话不多说先上视频,一看就懂 另外可参考这里:https://www.cnblogs.com/dehai/p/4285749.html ,这个近6年前的帖子 程序结构 程序分成上位机(PC端)与下位机( ...

  5. 一篇搞定Java集合类原理

    Java集合类实现原理 1.Iterable接口 定义了迭代集合的迭代方法 iterator() forEach() 对1.8的Lambda表达式提供了支持 2. Collection接口 定义了集合 ...

  6. Js模块化开发的理解

    Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...

  7. [Luogu P4124] [CQOI2016]手机号码 (数位DP)

    题面 传送门:洛咕 Solution 感谢神仙@lizbaka的教学 这题是数位DP的非常非常模板的题目,只是状态有点多 . 这题我使用记忆化搜索实现的 中国有句古话说的好,有多少个要求就设多少个状态 ...

  8. The Product-Minded Software Engineer

    转自The Product-Minded Software Engineer Product-minded engineers are developers with lots of interest ...

  9. Angular2 初学小记

    1.与Angular1的异同 几乎完全不同(什么鬼~ 1)保留一些特性 表达式仍旧用{{}}. 2)属性指令变为驼峰式 ng-if ---> ngIf 3)ng-repeat被ngFor代替 4 ...

  10. 【SpringBoot】11-1.Springboot整合Springmvc+Mybatis增删改查操作(下)

    整合过程:https://www.isdxh.com/68.html 一.增--增加用户 1.创建实体类 package com.dxh.pojo; public class Users { priv ...