可以将通用或者公用的页面模块抽取成vue组件,在vue实例中引用。

在页面中可以如下实验组件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
使用组件
        <counter></counter>
    </div>
<script>

    //定义组件
    const counter = {
        template:"<button @click='num++'>你点击了{{num}}次</button>",
        data(){
            return {num:0};
        }
    }

    //全局注册组件:在所有的vue实例中都可以使用组件
    //参数1:组件名,参数2:具体的组件
    // Vue.component("counter", counter);

    var app = new Vue({
        el:"#app",
        components:{
            counter: counter
        }
    });
</script>
</body>
</html>

组件使用场景:在项目需要重用某个模块(头部,尾部,新闻。。。)的时候,可以将模块抽取成组件,其他页面中注册组件并使用。

  • 全局注册:在任何vue实例中都可以引用,如:一般网站的头部导航菜单
  • 局部注册:可以在有需要的页面引入组件,如:商城网站首页中各种活动模块
最后修改:2021 年 06 月 03 日 10 : 03 PM
如果觉得我的文章对你有用,请随意赞赏