Vue.js 5.1.2 定义组件

Ray_1997

于 2024-11-25 10:03:34 发布

阅读量124

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/leijinquan01/article/details/144019911

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件</title>
    <script src="vue.global.js"> </script>
</head>



<body>
    <div id="Application">
        <my-alert></my-alert>
        <my-alert></my-alert>

    </div>
    <script>
        const App = Vue.createApp({})
        const alertComponent = {
            data() {
                return {
                    msg: "警告框提示",    //标题信息
                    count: 0             // 提示次数
                }
            },
            methods: {
                click() {
                    alert(this.msg + this.count++) // 弹出提示框
                }
            },
            template:'<div><button @click="click">按钮</button></div>'
        }
        App.component("my-alert",alertComponent)
        App.mount("#Application")
    </script>
</body>

在组件 my-alert进行复用时，每个标签都是独立的组件实例