Vue 2.x – 非单文件组件

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

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>