Vue.js 中使用 v-for 循环渲染组件并传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Vue.js 中使用 v-for 循环渲染组件并传递数据</title>
<script src='../vue.js' type='text/javascript' charset='utf-8'></script>
<script src='./data.js'></script>
<style>
#app {
width: 500px;
height: 700px;
margin: 0 auto;
background-color: #dcdcdc;
box-sizing: border-box;
padding: 20px;
}
</style>
</head>
<body>
<div id='app'>
<headers></headers>
<mains> </mains>
</div>
</body>
<!-- header_template -->
<script type='text/html' id='headers'>
<button>全选</button>
<button>反选</button>
<h2>总价: ¥ 1922.03</h2>
</script>
<!-- mains_template -->
<script type='text/html' id='mains'>
<div>
<items v-for='item in goods_list' :item='item'></items>
</div>
</script>
<script type='text/html' id='items'>
<div>{{ item }}</div>
</script>
<script type='text/javascript'>
// 注册headers
const headers = {
template: '#headers'
};
// 注册items
const items = {
template: '#items',
props: ['item']
};
// 注册mains
const mains = {
template: '#mains',
data() {
return {};
},
components: {
items
}
};
<pre><code>Vue.createApp({
data() {
return {
goods
};
},
// 配置提供 依赖
provide() {
return {
goods_list: this.goods
};
},
components: {
headers,
mains
}
}).mount('#app');
</code></pre>
</script>
</html>
原文地址: https://www.cveoy.top/t/topic/qokf 著作权归作者所有。请勿转载和采集!