Vue父组件向子组件传值以及data和props的区别详解 - CSDN文库

132 浏览量更新于2023-05-04 收藏 37KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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:{

}

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38534344

粉丝: 0
资源: 916

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈