Vue中使用组件的三大步骤
一、第一步，定义组件(创建组件)
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
- el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
- data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
const student = Vue.extend({
template: `
<div>
<p style="color: red">学生姓名： {{ studentName }}</p>
<p>性别： {{ studentSex }}</p>
<button @click="showStudentName">点我显示学生姓名</button>
</div>
`,
data() {
return {
studentName: "Luca",
studentSex: "男"
}
},
methods: {
showStudentName() {
alert(this.studentName);
},
},
});
二、第二步，注册组件
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component(‘组件名’,组件)
Vue.component('student', student);
const vm = new Vue({
el: "#app",
components: {
student,
},
});
三、第三步，使用组件(写组件标签)
<组件名></组件名>
<!-- 3、使用组件（书写组件的标签） -->
<student></student>
<hr>
<student></student>
<hr>
<student></student>
四、完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的基本使用</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3、使用组件（书写组件的标签） -->
<student></student>
<hr>
<student></student>
<hr>
<student></student>
</div>
<script>
const student = Vue.extend({
template: `
<div>
<p style="color: red">学生姓名： {{ studentName }}</p>
<p>性别： {{ studentSex }}</p>
<button @click="showStudentName">点我显示学生姓名</button>
</div>
`,
data() {
return {
studentName: "Luca",
studentSex: "男"
}
},
methods: {
showStudentName() {
alert(this.studentName);
},
},
});
Vue.component('student', student);
const vm = new Vue({
el: "#app",
components: {
student,
},
});
</script>
</body>
</html>
|