海浪Code

Appearance

组件的定义 ​

实现应用中局部功能代码和资源的集合。

html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
        type="application/javascript"></script>
</head>

<body>
    <div id="root">
        <!-- 3.编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <student></student>
    </div>
<script>
    Vue.config.productionTip = false;
    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点提示</button>
            </div>
        `,
        data(){
            return {
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    })
    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                studentName:'李华',
                age:22
            }
        }
    })
    // 创建vm
    const vm = new Vue({
        el: '#root',
        // 2.注册组件(局部注册)
        components:{
            // 组件名: 中转变量
            school: school,
            student: student
        }
    })
</script>
</body>

</html>

组件三部曲 ​

  1. 创建组件
  2. 注册组件
  3. 使用组件

全局注册组件 ​

html
Vue.component('hello',hello)

组件名注意点 ​

尽可能回避HTML中已经存在的名称。

局部注册组件

组件名命名推荐：

一个单词 - 纯小写或首字母大写(school)

多个单词 - my-school或MySchool(需要脚手架环境支持)

定义组件时加一个name配置项可以提前定义组件在开发者工具当中的名称

html
const s = Vue.extend({
    name:'test',
    template:`
        <div>
            <h2>{{schoolName}}</h2>
            <h2>{{address}}</h2>
        </div>
    `,
    data(){

组件标签 ​

第一种写法

html
<school></school>

第二种写法

html
<school/>
<!--不用脚手架，这种方法会导致后续组件不能渲染-->

简写 ​

html
const school = Vue.extend(option) 可简写为  const school = option

Vue底层有判断，即使不写extend还是帮我们调用了extend

组件嵌套 ​

子组件注册到父组件里面，组件标签写到父组件模板里面。

APP组件管理所有组件

html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
        type="application/javascript"></script>
</head>

<body>
    <div id="root">

    </div>
    <script>
        Vue.config.productionTip = false;
        const student = {
            template:`
                <div>
                    <h2>{{studentName}}</h2>
                    <h2>{{age}}</h2>
                </div>
            `,
            data(){
                return {
                    studentName:'李四',
                    age:22
                }
            }
        }
        // 创建组件
        const school = {
            template:`
                <div>
                    <h2>{{schoolName}}</h2>
                    <h2>{{address}}</h2>
                    <student></student>
                </div>
            `,
            data(){
                return {
                    schoolName:'尚硅谷',
                    address:'北京昌平'
                }
            },
            // 注册组件
            components:{
                student
            }
        }
        // 定义app组件
        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                </div>
            `,
            components:{
                school,
            }
        })
        const vm = new Vue({
            template:`<app></app>`,
            el: '#root',
            data: {
                name: 'Vue'
            },

            components:{
                app,
            }
        })
    </script>
</body>

</html>

组件的this ​

组件中的this是组件实例对象