components
元件傳值_props
父與子
父傳值給子元件
父元件
<template>
<div class="thread-section">
<ul class="thread-list">
<thread
:active="5 === 6"
:phone="phone">
</thread>
</ul>
</div>
</template>
<script>
import Thread from './Thread.vue'
export default {
name: 'ThreadSection',
data(){
return{
phone: '15868600329'
}
},
components: { Thread },
}
</script>
子元件
<template>
<li
class="thread-list-item"
:class="{ active: active }">
<div>{{phone}}</div>
</li>
</template>
<script>
export default {
name: 'Thread',
props: {
active: Boolean,
phone: Number
}
}
</script>