1. 什么是组件【是为了复用】
- 组件就是标签【为了复用】
- 自定义标签
<div>官网的，我们也可以写成<gexiaowei>
使用 Vue.component() 方法注册组件,格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<zhangzhixi></zhangzhixi>
</div>
<script type="text/javascript">
// 定义Vue组件
Vue.component(
// 组件名称
"zhangzhixi", {
// 组件模板
template: "<li>Hello World!</li>" +
""
})
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
说明：
- Vue.component()：注册组件
- zhangzhixi：自定义组件的名字
- template：组件的模板
【下面是重点：】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<!--组件：传递给组件中的值props-->
<zhangzhixi v-for="array in arrays" v-bind:zhixi="array">
</zhangzhixi>
</div>
<script type="text/javascript">
// 定义Vue组件
Vue.component(
// 组件名称
"zhangzhixi",
{
// "prop"表示组件属性名称
props: ['zhixi'],
// 组件的模板
template: '<li>{{zhixi}}</li>'
})
var app = new Vue({
el: '#app',
data: {
arrays: [
"抽烟",
"喝酒",
"烫头"
]
}
})
</script>
</body>
</html>
说明：
- v-for=“array in arrays”：遍历 Vue 实例中定义的名为 arrays的数组，并创建同等数量的组件
- v-bind:zhixi=“array”：将遍历的 array 项绑定到组件中 props 定义的名为 zhixi 属性上；