Vue父组件向子组件传值以及data和props的区别详解
更新时间：2020年03月02日 10:08:29 作者：北海之灵
这篇文章主要介绍了Vue父组件向子组件传值以及data和props的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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>
到此这篇关于Vue父组件向子组件传值以及data和props的区别详解的文章就介绍到这了,更多相关Vue父组件向子组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了如何在Vue3中使用富文本编辑器,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下2024-01-01
单向数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了Vue实现开关按钮拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了Vue实现dom元素拖拽并限制移动范围的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
这篇文章给大家介绍了基于vue实现拖动滑块验证功能，代码引用css与js都是线上的，将代码全部复制到一个html中可以直接打开，超级简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中ref的用法及演示，ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上，下面来看看文章的详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家介绍了Vue3+vueuse实现放大镜示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了Vue事件的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论