一、定義組件（創(chuàng)建組件）
使用Vue.extend(options)創(chuàng)建荒叼，其中options和new Vue(options)時傳入的那個options幾乎一樣乖杠，但也有點區(qū)別匣缘；
區(qū)別如下：
el不要寫瘦棋，為什么稀火？ ——— 最終所有的組件都要經(jīng)過一個vm的管理，由vm中的el決定服務(wù)哪個容器赌朋。
data必須寫成函數(shù)凰狞，為什么篇裁？ ———— 避免組件被復(fù)用時，數(shù)據(jù)存在引用關(guān)系赡若。
// 1达布、定義組件（創(chuàng)建組件）：定義student組件
? ? ? ? const student = Vue.extend({
? ? ? ? // 可以簡寫成如下形式：
? ? ? ? // const student = ({
? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <p style="color: red">學(xué)生姓名： {{ studentName }}</p>
? ? ? ? ? ? ? ? ? ? <p>性別： {{ studentSex }}</p>
? ? ? ? ? ? ? ? ? ? <button @click="showStudentName">點我顯示學(xué)生姓名</button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? `,
? ? ? ? ? ? // el:'#root', //組件定義時，一定不要寫el配置項逾冬，因為最終所有的組件
? ? ? ? ? ? // 都要被一個vm管理黍聂，由vm決定服務(wù)于哪個容器。
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? studentName: "Luca",
? ? ? ? ? ? ? ? ? ? studentSex: "男"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? showStudentName() {
? ? ? ? ? ? ? ? ? ? alert(this.studentName);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? });
二粉渠、注冊組件
1.局部注冊：靠new Vue的時候傳入components選項
2.全局注冊：靠Vue.component(‘組件名’,組件)
// 2分冈、注冊組件（全局注冊）
? ? ? ? Vue.component('student', student);
? ? ? ? // 首先創(chuàng)建vm
? ? ? ? const vm = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? // 2、注冊組件（局部注冊）
? ? ? ? ? ? components: {
? ? ? ? ? ? ? ? // 說明：第一個student為注冊的組件名霸株，第二個student為定義的組件名
? ? ? ? ? ? ? ? // student: student,
? ? ? ? ? ? ? ? student,
? ? ? ? ? ? },
? ? ? ? });
三、使用組件（寫組件標(biāo)簽）
<組件名>,</組件名>
<!-- 3集乔、使用組件（書寫組件的標(biāo)簽） -->
? ? ? ? <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、使用組件（書寫組件的標(biāo)簽） -->
? ? ? ? <student></student>
? ? ? ? <hr>
? ? ? ? <student></student>
? ? ? ? <hr>
? ? ? ? <student></student>
? ? </div>
? ? <script>
? ? ? ? // 1扰路、定義組件（創(chuàng)建組件）：定義student組件
? ? ? ? const student = Vue.extend({
? ? ? ? // 可以簡寫成如下形式：
? ? ? ? // const student = ({
? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <p style="color: red">學(xué)生姓名： {{ studentName }}</p>
? ? ? ? ? ? ? ? ? ? <p>性別： {{ studentSex }}</p>
? ? ? ? ? ? ? ? ? ? <button @click="showStudentName">點我顯示學(xué)生姓名</button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? `,
? ? ? ? ? ? // el:'#root', //組件定義時尤溜，一定不要寫el配置項，因為最終所有的組件
? ? ? ? ? ? // 都要被一個vm管理汗唱，由vm決定服務(wù)于哪個容器宫莱。
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? studentName: "Luca",
? ? ? ? ? ? ? ? ? ? studentSex: "男"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? showStudentName() {
? ? ? ? ? ? ? ? ? ? alert(this.studentName);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? });
? ? ? ? // 2、注冊組件（全局注冊）
? ? ? ? Vue.component('student', student);
? ? ? ? // 首先創(chuàng)建vm
? ? ? ? const vm = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? // 2哩罪、注冊組件（局部注冊）
? ? ? ? ? ? components: {
? ? ? ? ? ? ? ? // 說明：第一個student為注冊的組件名授霸，第二個student為定義的組件名
? ? ? ? ? ? ? ? // student: student,
? ? ? ? ? ? ? ? student,
? ? ? ? ? ? },
? ? ? ? });
? ? </script>
</body>
</html>
