vue.js全局组件和局部组件注册方式（易懂）

最新推荐文章于 2023-06-27 13:55:37 发布

Lyi_Zri

最新推荐文章于 2023-06-27 13:55:37 发布

阅读量216

点赞数 1

文章标签： Vue 模板组件局部组件事件监听数据绑定

本文链接：https://blog.csdn.net/weixin_44846765/article/details/112276849

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-button></my-button>
        <my-button2></my-button2>
    </div>
    <template id="tep">
        <!-- 因为一个模板内部只能有一个根元素，所以要用一个div包裹起来 -->
        <div>
            <p @click="fn()">{{msg}}</p>
            <button @click='count++'>我的全局模板按钮点击了{{count}}次</button>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="vue.js"></script> -->
    <script>
        Vue.component('my-button',{
            template:'#tep',
            data:function(){
                return {msg:'hello template',count:0}
            },
            methods:{
                fn:function(){
                    alert('hello,template')
                }
            }
            
        })
        var localComponent = {
            // 局部组件的方法，函数都写在这里
            data:function(){
                return {sum:0}
            },
            template:"<button  @click='sum++'>我的局部模板按钮被点击了{{sum}}次</button>"
        }
        new Vue({
            el:'#app',
            // 局部组件的注册方式，记得component要加s才是局部注册
            components:{
                'my-button2':localComponent,
                
            }
           
        })
    </script>
</body>
</html>

Lyi_Zri

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js全局组件和局部组件注册方式（易懂）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=".
复制链接

扫一扫