VUE学习：vue基础10————组件：组件的使用

最新推荐文章于 2024-10-17 11:45:42 发布

北凉冬

最新推荐文章于 2024-10-17 11:45:42 发布

阅读量110

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117200468

版权

vue.js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的组件创建和使用方法，包括全局组件的定义、简写形式以及私有组件的实现。通过示例展示了如何通过`Vue.extend()`和直接对象方式创建组件，并强调了组件模板必须有一个根元素的要求。同时，提到了组件名称的规范和私有组件的局部注册。

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

提示：
本文为VUE栏目：VUE学习：vue基础10————组件：组件的使用

前言

本文vue框架中组件相关。

提示：以下是本篇文章正文内容，下面案例可供参考

组件

示例：创建全局组件模板

<body>
<div id="app" style="border: 1px solid tomato">
    <wuyanzu>吴彦祖</wuyanzu>
    <jj>wyz啊</jj>
</div>

</body>
<script>
    /*创建全局组件模板*/
    let wyz=Vue.extend({
       template:'<h3>吴彦祖</h3>'
    });
    // 挂载模板到组件对象上
    Vue.component('jj',wyz);
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
</script>

**吴彦祖**是无效的。

挂载模板到组件对象上**wyz啊**，输出h3标签包含的模块

在这里插入图片描述

简写形式：

简写一

<body>
<div id="app" style="border: 1px solid tomato">
    <zwj></zwj>
</div>
</body>
<script>
    Vue.component('zwj',Vue.extend({
        template:'<h4>张无忌</h4>'
    }));
  
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
</script>

简写二

不使用extend函数也能创建全局组件

<body>
<div id="app">
    <test2></test2>
</div>
</body>
<script>
    // 不使用extend函数也能创建全局组件
    Vue.component('test2',{
        template:'<h3>全局组件2</h3>'
    });


    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        

    });
</script>

HTML中规定标签名不区分大小写，推荐标签名全小写，如果标签名多个单词组成，中间用横线隔开。

<body>
<div id="app" style="border: 1px solid tomato">
    <my-test></my-test>
    <my--test></my--test>
</div>

<div id="app2">
    <zwj></zwj>
    <test2></test2>
    <login></login>
</div>
</body>
<script>
    
    Vue.component('myTest',Vue.extend({
        template:'<h4>张三丰</h4>'
    }));

    Vue.component('my-Test',Vue.extend({
        template:'<h4>张翠山</h4>'
    }));
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
</script>

重点:如果模板输出的内容为多个标签组成，则这多个标签一定要有一个父级标签。

自定义组件的template属性指向的模板内容，必须只能有一个根元素(只能返回一个标签，但是该标签内可以存在多个标签)

<body>
<div id="app" style="border: 1px solid tomato">
    <test2></test2>
</div>
</body>
<script>
    Vue.component('test2',Vue.extend({
        template:'<div><p>p1</p><p>p2</p></div>'
    }));
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
</script>

私有组件

<body>
<div id="app" style="border: 1px solid tomato">
    <test2></test2>
    <login></login>
</div>

<div id="app2">
    <test2></test2>
    <login></login>
</div>
</body>
<script>
   
    /*重点:如果模板输出的内容为多个标签组成，则这多个标签一定要有一个父级标签。*/
    /*自定义组件的template属性指向的模板内容，必须只能有一个根元素（只能返回一个标签，但是该标签内可以存在多个标*/
    Vue.component('test2',Vue.extend({
        template:'<div><p>p1</p><p>p2</p></div>'
    }));

    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
    let vm2 = new Vue({
        el: "#app2",
        data: {},
        methods: {},
        components:{
            login:{
                template:"<h1>我是私有组件</h1>"
            }
        }
    });
</script>