【Vue实战】组件基础

最新推荐文章于 2024-04-26 11:31:32 发布

Milk595

最新推荐文章于 2024-04-26 11:31:32 发布

阅读量305

点赞数

分类专栏： Vue.js 文章标签： Vue 组件基础

本文链接：https://blog.csdn.net/weixin_43352901/article/details/109038938

版权

组件基础

1、组件局部注册的用法

<body>
    <div id="app">
        <!--3.my-component只能在#app下使用-->
        <my-component></my-component>
    </div>
    <script>
    //1.创建一个组件构造器
    var myComponent=Vue.extend({
    
        template:'<div>this is my first component！</div>'
    })
    var vm=new Vue({
    
        template:'<div>this is my first component!</div>'
    })
    var vm=new Vue({
    
        el:'#app',
        components:{
    
            //2.将myComponent组件注册到vue实例下
            'my-component':myComponent
        }
    });
    </script>
</body>

2. 验证组件全局注册的用法

<body>
    <div id="app">
        <!--3.#app是vue实例挂载的元素，应该在挂载元素范围内使用组件-->
        <my-component></my-component>
    </div>
    <div id="app2">
        <my-component></my-component>
    </div>
    <my-component></my-component>
    <script>
    //1.创建一个组件构造器
    var myComponent=Vue.extend({
    
        template:'<div>This is my first component！</div>'
    })
    //2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
    Vue.component('my-component',myComponent)
    var vm=new Vue({
    
        el:'#app'
    });

    var vm1=new Vue({
    
        el:'#app2'
    })
    </script>
</body>

3. 验证通过组件注册语法糖简化全局注册步骤

<body>
    <div id="app1">
            <my-component1></my-component1>
    </div>
    <div id="app2">
            <my-component2></my-component2>
            <my-component3></my-component3>
            <my-component1></my-component1>
    </div>

    <script>
    //全局注册，my-component1是标签名称
    Vue.component('my-component1',{
    
        template:'<div>this is the first component!</div>'
    })
    var vm1=new Vue({
    
        el:'#app1'
    })
    var vm2=new Vue({
    
        el:'#app2',
        components:{
    
            //局部注册，my-component2是标签名称
            'my-component2':{
    
                template:'<div>this is the second component!</div>'
            },
            //局部注册，my-component3是标签名称
            'my-component3':{
    
                template:'<div>this is the third component!</div>'
            }
        }
    })
    </script>
</body>

4. 1验证使用script或template标签将定义在JavaScript中的HTML模板分离出来

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script type

最低0.47元/天解锁文章

Milk595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue实战】组件基础

组件基础1、组件局部注册的用法<body> <div id="app">  <my-component></my-component> </div> <script> //1.创建一个组件构造器 var myComponent=Vue.extend({ template:'
复制链接

扫一扫