vue 系列全局组件局部组件

最新推荐文章于 2024-07-15 16:14:03 发布

Mic_start

最新推荐文章于 2024-07-15 16:14:03 发布

阅读量162

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_37574218/article/details/105969670

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

全局组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button-num2></button-num2>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
    Vue.component('buttonNum',{
        data:function () {
            return {
                num:0
            }
        },
        template:'<button @click="sum">点击{{num}}</button>',
        methods:{
            sum:function () {
                this.num++;
            }
        }
    })
    Vue.component('button-num2',{
        data:function () {
            return {
            }
        },
        template:'<buttonNum>',
        methods:{
        }
    })
    const vm= new Vue({
        el:"#app",
        data: {

        },
    })
</script>
</body>
</html>

对应视频：全局组件

局部组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <city-vue></city-vue>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
    Vue.component('city-vue',{
        template:'<city-address></city-address>'
    })
    let city={
        data: function () {
            return {
                city:'上海'
            }
        },
        template:'<div>{{city}}</div>'
    }
    const vm= new Vue({
        el:"#app",
        data: {
        },
        components:{
            'city-address':city
        }
    })
</script>
</body>
</html>