可以将通用或者公用的页面模块抽取成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实例中都可以引用,如:一般网站的头部导航菜单
- 局部注册:可以在有需要的页面引入组件,如:商城网站首页中各种活动模块