Vue非单文件组件

最新推荐文章于 2024-02-08 10:28:07 发布

HeX_7

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量112

点赞数

分类专栏： # Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/hex_7/article/details/124751147

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、基本使用

Vue中使用组件的三大步骤:

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

一、如何定义一个组件?

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别

区别如下:

1.e1不要写，为什么? -最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器

2. data必须写成函数，为什么? _避免组件被复用时，数据存在引用关系。

备注:使用template 可以配置组件结构。

二、如何注册组件?

1.局部注册:靠new Vue的时候传入components选项

2.全局注册:靠Vue.component('组件名’，组件)

三、编写组件标签:

<body>
    <div id="root">
        <!-- 第三步:编写组件标签 -->
        <xuexiao></xuexiao>
        <hr>
        <!-- 第三步:编写组件标签 -->
        <xuesheng></xuesheng>
    </div>


    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;


        // 第一步：创建
        // 创建school组件
        const school = Vue.extend({

            template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,

            // el:"#root",// 组件定义时 不用
            data(){
                return {
                    schoolName:'尚硅谷',
                    address:'北京',
                }
            }
        })

        // 创建student组件
        const student = Vue.extend({

            template:`
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>
            `,

            // el:"#root",
            // 组件定义时 不用
            data(){
                return {
                    studentName:'张三',
                    age:18
                }
            }
        })

        // 创建hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好啊！{{name}}</h2>
                </div>
            `,
            data(){
                return {
                    name:'Tom'
                }
            }
        })

        // 第二步：全局注册组件
        Vue.component('hello',hello)


        // 创建vm
        new Vue({
            el:"#root",
            // 第二步：注册组件（局部注册）
            components:{
                xuexiao:school,
                xuesheng:student
            },
            methods:{
                showName(){
                    alert(this.schoolName)
                }
            }
        })

    </script>
</body>

2、几个注意点

几个注意点:

1.关于组件名:

一个单词组成:

第一种写法(首字母小写): school

第二种写法(首字母大写): School

多个单词组成:

第一种写法(kebab-case命名): my-school

第二种写法(CamelCase命名): MySchool ( 需要Vue脚手架支持)

备注:

(1).组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第种写法: <school></school>

第二种写法: <school/>

备注:不用使用脚手架时，<schoo1/>会导致后续组件不能渲染。

3.一个简写方式:

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

<body>
    
    <div id="root">
        <h1>{{msg}}</h1>
        <school></school>
        <!-- 自闭和脚手架模式下 -->
        <school/>
    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        // 定义组件
        const s = Vue.extend({
            name:'atguigu',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            }
        })

        new Vue({
            el:'#root',
            data:{
                msg:'欢迎学习Vue'
            },
            // 注册组件
            components:{
                school:s
            }
        })
    </script>
</body>

3、组件嵌套

<body>
    <div id="root">
        <!-- <app></app> -->
    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        
        // 定义student组件
        const student = Vue.extend({
            name:'student',
            template:`
                <div>
                    <h2>学生名称：{{name}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>
            `,
            data(){
                return {
                    name:'张三',
                    age:18
                }
            }
        })

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

        // 定义hello组件
        const hello = Vue.extend({
            template:`
                <h1>{{msg}}</h1>
            `,
            data(){
                return {
                    msg:'欢迎来到人世间'
                }
            }
        })
        
        // 定义app组件
        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                    <hello></hello>
                    
                </div>
            `,
            components:{
                school,
                hello
            }
        })

        // 创建vm
        new Vue({
            template:`
                <app></app>
            `,
            el:"#root",
            // 局部注册组件
            components:{
                app
            }
        })
    </script>
</body>