Vue组件化开发

最新推荐文章于 2024-07-30 23:06:43 发布

io无心

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量146

点赞数

分类专栏： web前端 Vue 文章标签： vue.js 前端 javascript

需转载请联系QQ:846581636

本文链接：https://blog.csdn.net/LYXlyxll/article/details/125628389

版权

web前端同时被 2 个专栏收录

42 篇文章 6 订阅

订阅专栏

Vue

35 篇文章 0 订阅

订阅专栏

非单文件组件

非单文件组件的局部注册

<body>
    <div id="root">
        <xuexiao></xuexiao>
        <br>
        <xuesheng></xuesheng>
    </div>
</body>
<script type="text/javascript">

    const school = Vue.extend({
        template:`<div><h1>学校名称：{{name}}</h1><h1>校长：{{headmaster}}</h1></div>`,
        data() {
            return {
                name: "希望学校",
                headmaster: "李义新"
            }
        }
    })

    const student = Vue.extend({
        template:`<div><h1>学生姓名：{{name}}</h1><h1>年级：{{age}}</h1></div>`,
        data() {
            return {
                name: "李二新",
                age: 11
            }
        }
    })

    new Vue({
        el: "#root",
        components: {
            xuexiao: school,
            xuesheng: student
        }
    })
</script>

非单文件组件的全局注册

// 创建组件
const school = Vue.extend({
    //

    template: `<div><h1>学校名称：{{name}}</h1><h1>校长：{{headmaster}}</h1></div>`,
    data() {
        return {
            name: "希望学校",
            headmaster: "李义新"
        }
    }
})

// 注册全局组件
Vue.component('school', school);

组件的名称规范

组件的简写方式

const school = Vue.extend(options) 可简写为：const school = options

非单文件组件的嵌套

<body>
    <div id="root">
        <!-- 使用组件，标签名要和注册的组件名称一致 -->
        <school></school>
    </div>
</body>
<script type="text/javascript">

    const student = Vue.extend({
        template: `<div><h1>学生姓名：{{name}}</h1><h1>年级：{{age}}</h1></div>`,
        data() {
            return {
                name: "李二新",
                age: 11
            }
        }
    })

    // 创建组件
    const school = Vue.extend({
        template:
            `<div>
                <h1>学校名称：{{name}}</h1><h1>校长：{{headmaster}}</h1>
                <student></student>
             </div>`,
        data() {
            return {
                name: "希望学校",
                headmaster: "李义新"
            }
        },
        components:{
            student
        }
    })

    new Vue({
        el: "#root",
        // 注册组件
        components: {
            school
        }
    })
</script>

组件的统一管理

<body>
    <div id="root">
        <!-- 使用组件，标签名要和注册的组件名称一致 -->
        <app></app>
    </div>
</body>
<script type="text/javascript">

    // 创建组件
    const school = Vue.extend({
        template: `<div><h1>学校名称：{{name}}</h1><h1>校长：{{headmaster}}</h1></div>`,
        data() {
            return {
                name: "希望学校",
                headmaster: "李义新"
            }
        }
    })

    const student = Vue.extend({
        template: `<div><h1>学生姓名：{{name}}</h1><h1>年级：{{age}}</h1></div>`,
        data() {
            return {
                name: "李二新",
                age: 11
            }
        }
    })

    const app = Vue.extend({
        template: `<div><school></school><student></student></div>`,
        components: {
            school,
            student
        }
    })

    new Vue({
        el: "#root",
        // 注册组件
        components: {
            app
        }
    })
</script>

关于VueComponent

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写<school></school>或<schoo/l>，Vue解析时会帮我们创建school组件的实例对象。
特别注意：每次调用Vue.extend，返回的都是一个全新的VueCOmponent。
关于this指向：
1. 组件配置中：data函数、methods中的函数、watch中的函数，computed中的函数，它们的this均是【VueComponent实例对象】。
2. new Vue()配置中：data函数、methods中的函数、watch中的函数，computed中的函数，它们的this均是【Vue实例对象】。