vue学习笔记-组件篇(组件注册)

最新推荐文章于 2024-10-08 17:48:41 发布

VickQ

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量128

点赞数

分类专栏： web前端-vue 文章标签： vue.js vue组件

本文链接：https://blog.csdn.net/qq_43069222/article/details/103387192

版权

web前端-vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件

组件 (Component) 是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代码

组件注册

全局组件

Vue.component(componentName, { })
参数1：标签名称，参数2:选项对象
全局组件在任何vue实例中都可以使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件名称-->
        <my-component></my-component>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //全局注册组件
    //第一个参数自定义标签名
    Vue.component('my-component', {
        //这里的data是一个函数，返回的是一个对象
        data: function () {
            return {
                msg: '全局组件'
            }
        },
        template: '<div>{{msg}}</div>'
    })

    //创建vue实例
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },

    })


</script>

</html>

局部注册
只能在当前vue实例中使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件名称-->
        <my-component></my-component>
    </div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
    //创建vue实例
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
        components: {
            //可以将该组件放入外部，这里直接引用
            'my-component': {
                //这里的data是一个函数，返回的是一个对象
                data: function () {
                    return {
                        msg: '全局组件'
                    }
                },
                template: '<div>{{msg}}</div>'
            }
        }

    })


</script>

</html>