0
点赞
收藏
分享

微信扫一扫

【Vue】—props属性

云岭逸人 2022-07-04 阅读 126

【Vue】—props属性

【Vue】—props属性_css

【Vue】—props属性_d3_02
【Vue】—props属性_d3_03
【Vue】—props属性_html_04

<template>
<div>
<h2>Parent</h2>
<!-- 父子传递数据 -->
<Son :data='arr' msg='msg数据' :obj="obj" :number='number' :game='game' />
</div>
</template>

<script>
import Son from './Son';
export default {
components: {
Son
},
data() {
return {
game: 'CF',
number: 1,
obj: {
user: 'Lily',
age: 18
},
arr: [{
title: '王嘉尔',
year: 2021,
picurl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10192950652%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631004355&t=16c701931087f9b3537191ba4deb7594'

},
{
title: '王一博',
year: 2020,
picurl: 'https://pics2.baidu.com/feed/0d338744ebf81a4c633b6aa4fd3a5d5f252da66c.jpeg?token=11476c18354c409e2b80b5c2e6c5d3b1&s=BA8AF205CE6258947A3C2ED903005094'

}
]
}
}
}
</script>

<style>

</style>
<template>
<div>
<h2>Son</h2>
<div v-for='(item,index) in data' :key='index'>
<div>
<img :src="item.picurl" alt="">
</div>
<div>
<p>{{item.title}}</p>
<p>{{item.year}}年</p>
</div>
</div>
<p>msg:{{msg}}</p>
<p>number:{{number}}</p>
<p>user:{{obj.user}}</p>
<p>age:{{obj.age}}</p>
<p>游戏:{{game}}</p>
<button @click="clickme">获取this</button>
</div>
</template>

<script>
export default {
//props: ['data']
props: {
data: Array,
msg: [String, Number, Boolean],
obj: {
type: Object,
required: true,
default: function () {
return {
user: 'admin',
age: 0
}
}
},
number: {
type: [Number, String],
default: 100
},
game: {
validator: function (value) {
let arr = ['CF', '和平', 'LOL'];
return arr.indexOf(value) !== -1;
}
}
},
methods: {
clickme() {

}
}
}
</script>

<style>

</style>

【Vue】—props属性_js_05


举报

相关推荐

0 条评论