hualinux 进阶 vue 1.12：todolist（二）组件拆分

最新推荐文章于 2022-01-16 05:09:10 发布

hualinux

最新推荐文章于 2022-01-16 05:09:10 发布

阅读量120

点赞数

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux vue vue 组件拆分 todolist（二）组件拆分

本文链接：https://blog.csdn.net/hualinux/article/details/115467222

版权

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章 4 订阅

订阅专栏

本文详细介绍了Vue.js中组件的定义，包括全局组件和局部组件的创建，以及组件名大小写的规范。通过示例展示了如何注册并使用组件，强调了组件在复杂数据展示中的重要性。同时，讨论了组件命名遵循W3C规范的重要性，以及为何在某些场景下更倾向于使用局部组件。

摘要由CSDN通过智能技术生成

组件是指网页上的某一部分，当我们做的网页很大的时候，我们可以把一个大型的网页拆成几个部分。每一个组分就是一个小的组件，这个每个组件维护就简单多了。

我们需要学习如何定义组件、组件之间如何通讯

上章例子中的li数据展示只是简单的部分，如果数据展示或关系变得复杂的时候就要抽离出来变成一个单独的组件。

一、全局组件定义

1.1 说明

在Vue官方对组件定义为

组件是可复用的 Vue 实例，且带有一个名字。

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component(
'my-component-name'
, { 
/* ... */
 })

该组件名就是 Vue.component 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

你可以在风格指南中查阅到关于组件名的其它建议。

1.2 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>
<body>

<div id="root">
    <div>
        <input v-model="note"/>
        <button v-on:click="myClick">提交</button>
    </div>
    <ul>
        <todo-item></todo-item>
    </ul>
</div>

<script>
    Vue.component('todo-item', {
        template: '<li>item</li>'
    })

    new Vue({
        el: "#root",
        data: {
            note: '',
            list: []
        },
        methods: {
            myClick: function (){
                this.list.push(this.note)
                this.note=''
            }
        }
    })
</script>

</body>
</html>

效果：

二、组件名大小写

定义组件名的方式有两种：

使用 kebab-case（短横线分隔）

Vue.component(
'my-component-name'
, { 
/* ... */
 })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase（大驼峰）

Vue.component(
'MyComponentName'
, { 
/* ... */
 })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

三、局部组件

3.1 定义

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

3.2 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="note"/>
        <button v-on:click="myClick">提交</button>
    </div>
    <ul>
        <todo-item></todo-item>
    </ul>
</div>

<script>
    const TodoItem = {
        template: '<li>item</li>'
    };
    new Vue({
        el: "#root",
        data: {
            note: ''
        },
        components: {
            'todo-item': TodoItem
        }
    })
</script>
</body>

</html>

运行效果：

hualinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hualinux 进阶 vue 1.12：todolist（二）组件拆分

目录一、全局组件定义1.1 说明1.2 例子二、组件名大小写三、局部组件3.1 定义3.2 例子组件是指网页上的某一部分，当我们做的网页很大的时候，我们可以把一个大型的网页拆成几个部分。每一个组分就是一个小的组件，这个每个组件维护就简单多了。我们需要学习如何定义组件、组件之间如何通讯上章例子中的li数据展示只是简单的部分，如果数据展示或关系变得复杂的时候就要抽离出来变成一个单独的组件。一、全局组件定义1.1 说明在Vue官方对组件定义为组件是可..
复制链接

扫一扫

专栏目录