vue学习之组件——全局组件和局部组件

vue有两种组件的注册类型:全局注册和局部注册。

注册组件时传入的配置和创建Vue实例差不多,但也有不同,其中一个就是data属性必须是一个函数。

注:组件命名可以用使用 kebab-case(my-component)形式和ascalCase(MyComponent)形式,但直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。所以最好还是用kebab-case形式的。

例子:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <global-component></global-component>
        <partial-component></partial-component>
    </div>
    <script>
        //全局组件
        Vue.component('global-component', {
            template: `<div>这是一个全局自定义组件</div>`
        })

        let app = new Vue({
            el: '#app',
            components: {
                'partial-component': {
                    template: `<div>这是一个局部的自定义组件,只能在当前Vue实例中使用</div>`,
                }//局部组件
            }
        });
    </script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/summerpowerz/article/details/80716107