<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 组件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 使用props 获取父组件的值 -->
<site-name title="Google"></site-name>
<site-name title="Runoob"></site-name>
<site-name title="Taobao"></site-name>
<!-- 动态props传值 -->
<Java v-for="item,index in site" :id="item.id" :title="item.title"></Java>
</div>
<script>
const app = Vue.createApp({
data(){
return{
site:[
{id:1,title:"大狮子"},
{id:2,title:"大老虎"},
{id:3,title:"歼20"},
{id:4,title:"大风筝"},
]
}
}
})
// site-name 为子组件
// 使用props 获取父组件的值
app.component('site-name', {
props: ['title'],
template: `<h4>{{ title }}</h4>`
})
//动态props传值
app.component('Java',{
props:['id','title'],
template: `<p>{{ id }} ==== {{title}}</p>`
})
app.mount('#app')
</script>
</body>
</html>
效果如下图