【VUE】6.组件通信(一)父组件向子组件传值
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.组件通信(一)父组件向子组件传值的更多相关文章
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
- vue父组件引用多个相同的子组件传值
没有什么问题是for 解决不了的,我一直深信这句话,当然这句话也是我说的 父组件引用多个相同的子组件传值问题 (这种情况很少遇到) 1 <template> 2 <div> 3 ...
- 关于Vue中,在方法中使用(操作)子组件获取到的数据
已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created.mounted生命周期中使用的,只能在beforeUpdated或者updated获取到: 但是如果我们要使用这个数 ...
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...
- layer.open中父页面向子页面传值
1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...
- Vue组件通信之父传子
一般情况下,子组件中无法直接使用父组件的变量.借助子组件的props选项可以实现这一点. 这里我将一个vue实例作为一个父组件: const app = new Vue({ el:'#div1', d ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
随机推荐
- 利用云主机搭建MySQL服务器
前言:有了一台云服务器之后,就想着如何物尽其用.利用其不关机(意外除外)的特性,我们可以在服务器上安装数据库服务,实现云数据库服务器,这样就可以随时随地的访问数据库了,不再受各种限制. 这里以MySQ ...
- Navicat连接远程MySQL8.0数据库
前言: 如果你有一台服务器,并且安装了Mysql8.0及以上版本数据库.此时想通过本地Navicat软件连接远程服务器上的mysql数据库.那么接下来你就要完成以下准备工作: 登录远程服务器上的数据库 ...
- B. Game of the Rows 解析(思維)
Codeforce 839 B. Game of the Rows 解析(思維) 今天我們來看看CF839B 題目連結 題目 有如下圖片所示的飛機座位\(n\)排,和\(k\)隊士兵,每隊數量不一定. ...
- python的多线程和java的多线程之间的区别
在python中,由于Cpython解释器的全局解释器的存在,那么多线程的话在同一时刻只能有一个线程执行,意思就是python中的多线程只能并发执行, 没有办法实现真正的并行,也就是无法利用多核CPU ...
- 【译】Rust中的array、vector和slice
原文链接:https://hashrust.com/blog/arrays-vectors-and-slices-in-rust/ 原文标题:Arrays, vectors and slices in ...
- php socket通信的简单实现
socket通信的原理在这里就不说了,它的用途还是比较广泛的,我们可以使用socket来做一个API接口出来,也可以使用socket来实现两个程序之间的通信,我们来研究一下在php里面如何实现sock ...
- C#+Arduino Uno 实现声控系统完全实施手册
话不多说先上视频,一看就懂 另外可参考这里:https://www.cnblogs.com/dehai/p/4285749.html ,这个近6年前的帖子 程序结构 程序分成上位机(PC端)与下位机( ...
- 致萌新与不会用 NOI Linux 的 OIer
全文绝大部分转载自:这篇好文章啊. 目录 1:GUIDE 2:Gedit 原文 打开 编译运行 3.Vim 3-1:这东西咋开啊 3-2:这东西咋用啊 4.编译与运行 5.调试 6.CSP竞赛中编写代 ...
- 一次打包引发的思考,原来maven还能这么玩?
持续原创输出,点击上方蓝字关注我 目录 前言 依赖关系 你会怎么做? 必知的几个参数 总结 前言 昨天有一个读者找我的交流工作心得,偶然间提到一个有趣的问题,如下: 「大致的意思」:公司最近在整多模块 ...
- php连接神通数据库 ci框架
神通数据库连接手册 1.扩展安装 目前连接神通数据库有两种方式 ODBC PDO_ACI 具体请看手册,目前使用PDO_ODBC方法PS:请看操作2 目前只有64位有pdo_aci.so文件,需要在神 ...