Vue父组件向子组件传值以及data和props的区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xukongjing1/article/details/82457585
1.在父组件中定义 msg 属性
data:{
msg:'123 -我是父组件中的数据'
},
2.引用子组件
父组件可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。 把父组件传递过来的 msg 属性，绑定到子组件的 parentmsg 属性上。 <com1 :parentmsg="msg"></com1>
3. 在子组件定义部分，需要把父组件传递过来的 parentmsg 属性，先在props数组中定义一下（代表这个属性是由父组件传递过来的），这样，才能使用这个数据
props:['parentmsg'],
4.在子组件中使用
template:"<h1>这是子组件--{{parentmsg}}</h1>",
5.子组件中data和props的区别
子组件中的data数据，不是通过父组件传递的是子组件私有的，是可读可写的。 子组件中的所有 props中的数据，都是通过父组件传递给子组件的，是只读的。 完整代码： <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<!-- 父组件可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，
以属性绑定的形式，传递到子组件内部，供子组件使用 -->
<com1 :parentmsg="msg"></com1>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123-我是父组件中的数据'
},
components:{
//子组件中无法访问父组件的data和methods
com1:{
//子组件中的data数据，不是通过父组件传递的是子组件私有的
//data上的数据，是可读可写的
data(){
return {
title:'123',
content:'qqq'
}
},
template:"<h1>这是子组件--{{parentmsg}}</h1>",
//注意，组件中的所有 props中的数据，都是通过父组件传递给子组件的
//只读
props:['parentmsg'],//把父组件传递过来的parentmsg属性，
//先在props数组中定义一下，这样，才能使用这个数据
methods:{ }
}
}
})
</script>
</html> ————————————————
版权声明：本文为CSDN博主「北海之灵」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xukongjing1/article/details/82457585
Vue父组件向子组件传值以及data和props的区别的更多相关文章
- 第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 父组件向子组件传值，传方法，传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
随机推荐
- 工具系列 | Docker基本概念
1.什么是docker? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化. ...
- Android如何屏蔽home键和recent键
最近在做一个项目的时候,进入一个 Activity后需要暂时屏蔽掉home键和recent键(back键可以在onKeyDown里面处理),网上找了半天,都是针对旧版本android的方法,andro ...
- Logstash配置以服务方式运行
Logstash官网最新版下载地址以及YUM源:https://www.elastic.co/cn/downloads/logstash Logstash最常见的运行方式即命令行运行 ./bin/lo ...
- java判断是excel2003还是2007以上
public static Workbook create(InputStream in) throws IOException,InvalidFormatException { if (!in.ma ...
- [整理]如何撤销远程的git提交？
确保你在你想要撤销的分支上. 第一步,本地使用 get reset --hard ,切换到特定的commit. 第二部,使用 --force推送到远程分支. git reset --hard cedc ...
- java Random 随机密码
/** * Created by xc on 2019/11/23 * 生成随机密码:6位数字 */public class Test7_4 { public static void main(Str ...
- ["Visual Studio快捷键" ,"Vs","IDEA快捷键"]
描述说明 描述 说明 ↑ 方向键.上 ↓ 方向键.下 ← 方向键.左 → 方向键.右 快捷键大比拼 描述 Visual Studio 快捷键 IDEA快捷键 VisualStudio学名 IDEA学名 ...
- IDEA的java源码文件左边有一个红色的J
解决办法: 如果源码文件这里已经有一个路径,那就添加现在的.java文件所在目录,或者删除了再重新添加
- [转帖]8个最佳Docker容器监控工具，收藏了
8个最佳Docker容器监控工具,收藏了 https://www.sohu.com/a/341156793_100159565?spm=smpc.author.fd-d.9.1574127778732 ...
- 我瞅瞅源码系列之---drf
我瞅瞅源码系列之---drf restful规范 从cbv到drf的视图 / 快速了解drf 视图 版本 认证 权限 节流 jwt 持续更新中...