Vue 2.x – 非单文件组件

Ne-21 • 2021-08-20 • 编程技术 • 372 阅读

Vue中使用组件的三大步骤

一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

如何注册组件？

1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)

编写组件标签

<div id='#root'>
    <school></school>
</div>

几个注意点

关于组件名

一个单词组成：

  • 第一种写法(首字母小写)：school
  • 第二种写法(首字母大写)：School

多个单词组成：

  • 第一种写法(kebab-case命名)：my-school
  • 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签

第一种写法：<school></school>
第二种写法：<school/>
备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

一个简写方式

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

组件的嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>组件的嵌套</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">

        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        //定义student组件
        const student = Vue.extend({
            name:'student',
            template:`
                <div>
                    <h2>学生姓名：{{name}}</h2>  
                    <h2>学生年龄：{{age}}</h2>   
                </div>
            `,
            data(){
                return {
                    name:'milk',
                    age:18
                }
            }
        })

        //定义school组件
        const school = Vue.extend({
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>  
                    <h2>学校地址：{{address}}</h2>   
                    <student></student>
                </div>
            `,
            data(){
                return {
                    name:'jack',
                    address:'北京'
                }
            },
            //注册组件（局部）
            components:{
                student
            }
        })

        //定义hello组件
        const hello = Vue.extend({
            template:`<h1>{{msg}}</h1>`,
            data(){
                return {
                    msg:'欢迎学习！'
                }
            }
        })

        //定义app组件
        const app = Vue.extend({
            template:`
                <div> 
                    <hello></hello>
                    <school></school>
                </div>
            `,
            components:{
                school,
                hello
            }
        })

        //创建vm
        new Vue({
            template:'<app></app>',
            el:'#root',
            //注册组件（局部）
            components:{app}
        })
    </script>
</html>

undefined

版权声明：
作者：Ne-21
链接：https://blog.gocos.cn/archives/117.html
来源：云淡风轻
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
Vue 2.x – 非单文件组件
Vue中使用组件的三大步骤 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 如何定义一个组件？ 使用Vue.extend(options)创建，其中options和ne……
<<上一篇
下一篇>>