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" ...
随机推荐
- 禁用wordpress新编辑器，使用经典编辑器的方法
新更新的wordpress推出勒个什么古腾堡编辑器?简直太难用了,怎么屏蔽古腾堡编辑器,如何使用wordpress的经典编辑器.有人说使用插件,比如ClassicEditor或者DisableGute ...
- APP测试要点整理
APP测试基本流程以及APP测试要点https://www.cnblogs.com/dengqing9393/p/6497068.html 性能测试:https://blog.csdn.net/xia ...
- webpack的带表达式require和require.context()方法
带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...
- org.springframework.web.method.ControllerAdviceBean#isApplicableToBeanType 作用
org.springframework.web.method.ControllerAdviceBean#isApplicableToBeanType(@Nullable Class<?> ...
- 搭建npm私服流程
npm私服必要性 1. 如果公司处于隐私保护的需要,不想将自己封的包推到npm社区,但又急需要一套完整的包管理工具来管理越来越多的组件,模块,项目.对于前端,最熟悉的莫过于npm,bower等,但是b ...
- Request header field * is not allowed by Access-Control-Allow-Headers in preflight response问题解决
跨域问题报错信息为:Failed to load http://192.168.30.119: Request header field language is not allowed by Acce ...
- Maya编程——节点&命令
代码写完出现问题: 查了一下原因:
- LeetCode_461. Hamming Distance
461. Hamming Distance Easy The Hamming distance between two integers is the number of positions at w ...
- 使用Win10自带的截图工具
Win10自带的截图工具还是可以的,快捷键win+shift+s 截完图之后会有一个通知,你可以对截图进行二次编辑,编辑之后默认是立即保存的 再搭配着Fu图床工具使用,简直太爽了 讲一下怎么打开通知
- SpringBoot示例教程（一）MySQL与Mybatis基础用法
示例需求 在Springboot2框架中,使用Mysql和Mybatis功能:1. Mysql+Datasource集成2. Mybatis+XML用法详解 数据库准备 采用了Oracle中的scot ...