VUE组件封装

最新推荐文章于 2024-04-05 22:35:26 发布

吃瓜的阳大王

最新推荐文章于 2024-04-05 22:35:26 发布

阅读量190

点赞数

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/qq_44822110/article/details/104759603

版权

VUE组件封装

组件封装可以直接在HTML中写上标签来实现组件的功能

HTML页面 ↓

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE组件封装</title>

</head>

<body>
    <div id="seg1">
        <alert></alert>
        <alert></alert>
        <alert></alert>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS页面↓ 此方法封装的是全局组件在全局可以使用

alert 就是在HTML页面使用的标签名，本文实现的是一个按钮

// 定义全局
 Vue.component('alert', {
     template: '<button @click="on_click">弹弹弹</button>',
     methods: {
         on_click: function () {
             alert("弹你妹");
         }
     }
 })
var app = new Vue({
    el: '#seg1'
})

JS页面↓ 此方法封装的是局部组件在局部可以使用

components：{ } 这是封装组件属性在局部封装时用得到

alert 就是在HTML页面使用的标签名，本文实现的是一个按钮

var app = new Vue({
    el: '#seg1',
    components: {
        // 定义局部
         alert: {
             template: '<button @click="on_click">弹弹弹</button>',
             methods: {
                 on_click: function () {
                     alert("弹你妹");
                 }
             }
         }
    }
})

还是感觉有点结构混乱，这次把局部定义的内容放到外面，封装成一个函数传进来


// 封装方法
//把属性直接赋值给 alert_component
var alert_component = {
    template: '<button @click="on_click">弹弹弹</button>',
    methods: {
        on_click: function () {
            alert("弹你妹");
        }
    }
}


var app = new Vue({
    el: '#seg1',
    components: {
        // 封装方法 直接调用 alert_component
        alert: alert_component
    }
})