Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

Vue 父子组件传值——props

阿土 2020-01-05 22:20:52 阅读数:53 评论数:0 点赞数:0 收藏数:0

`

<!--父组件-->
<template\>
<!--父组件中引入子组件-->
<div\>
<!--定义一个名字:listen 传入数据内容:sun -->
<Had v-bind:listen="sun"></Had>
</div>
</template>
<script>
// 引入组件
import Had from './Had'
export default {
data(){
return {
message:'今天是',
sun:[
{name:'a',center:'left',show:'false'},
{name:'b',center:'right',show:'false'},
{name:'c',center:'left',show:'false'},
{name:'d',center:'right',show:'false'},
{name:'e',center:'left',show:'false'},
{name:'f',center:'right',show:'false'}
]
}
},
</script>
<!--子组件-->
<template>
<div class="class">
<!-- 父组件向子组件传值 -->
<!-- 从共同定义的listen中取值-->
<div v-for="item in listen">
<li>{{item.name}}</li>
<li v-show="item.show">{{item.center}}</li>
</div>
</div>
</template>
<script>
export default {
props:{ //props传值
listen:{ //listen名称
type:Array, //定义传值的类型 type 还有required
required:true
}
},
}
版权声明
本文为[阿土]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000021495738