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" ...
随机推荐
- 在Asp.Net Core 3.0中如何使用 Newtonsoft.Json 库序列化数据
在.Net Core 3.0中 内置了一套Json序列化/反序列化方案,默认可以不再依赖,不再支持 Newtonsoft.Json. 但是.NET Core 3.0 System.Text.Jso ...
- 公司-IT-Yahoo：百科
ylbtech-公司-IT-Yahoo:百科 雅虎(英文名称:Yahoo!,NASDAQ:YHOO)是美国著名的互联网门户网站,也是20世纪末互联网奇迹的创造者之一.其服务包括搜索引擎.电邮.新闻等, ...
- Lamda OrderBy 排序问题
var itemModel = itemList.OrderBy(s=> decimal.Parse(s.Price)).ToList(); 前端传递的list数据金额或者其他非数字类型的字段最 ...
- WebGL学习笔记（十二）：加载模型文件
目前为止,我们用到的模型顶点uv信息等,都是直接定义在代码中的,实际使用中,这些数据应该是由3D编辑器编辑好后按照一定的格式存储在文件中的,我们需要从文件中提取出对应的数据之后,组合成我们可以使用的信 ...
- C++ int double float对应的长度以及二进制
#include <iostream> using namespace std; void showIntBit(int a); void showDoubleBit(double a1) ...
- java html实体转义
public static void main(String[] args) { String str = " -<->-&-"-'" ...
- photoshop7.0 排版一寸照片、2寸照片
说明:必须先照一张一寸电子照片,否则是无法做成 1.本例同样采用photoshop CS5制作,其它版本通用,这里采用上一教程“PS照片处理教程-制作一寸照片并排版”的处理效果图进行排版,首先在PS中 ...
- aix如何将history输出所有命令导出到文本文件
more .sh_history cat .sh_history > mylogfile.txt
- 通Shell获取Tomcat进程号并杀死进程
#!/bin/bash echo "begin get tomcat8 pid" tomcat8_id=$( | grep -v grep | awk '{print $2}') ...
- [LOJ3053]希望
对于一组$s_{1\cdots k}$,合法的$u$构成一个连通块,满足$\left\lvert V\right\rvert-\left\lvert E\right\rvert=1$ 考虑算出算$f_ ...