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.x中apollo的使用,通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的，本文给大家介绍了前端获取到apollo数据的过程，需要的朋友可以参考下2023-02-02
每个Vue实例在创建时都要经过一系列初始化, 例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等，同时, 也会运行一些叫作生命周期钩子的函数，接下来让我们一起来探索Vue实例被创建时都经历了什么，感兴趣的同学跟着小编一起来探讨吧2023-05-05
这篇文章主要介绍了vue项目打包后打开空白解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue表格n-form中自定义增加必填星号,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-12-12
这篇文章主要为大家详细介绍了vue3中watch如何停止监视,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-12-12
为让大家更好的理解Vue3的Composition Api本文采用了详细的动画演绎，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了八种Vue组件间通讯方式合集(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
vue中的事件修饰符once,prevent,stop,capture,self,passive
这篇文章主要介绍了vue中的事件修饰符once,prevent,stop,capture,self,passive，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章主要介绍了vuex学习之Actions的用法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论