本文介绍了Vue.js中的组件化概念，包括组件的简单理解、基本使用和基础操作，如创建、注册及使用组件。讨论了全局组件和局部组件的差异，以及组件间的通信方式，如父传子组件通过props，子传父组件利用`this.$emit()`自定义事件。强调了组件中data为何以函数形式存在，以及props的数据验证和命名规范。
vue组件化
简单理解
什么是组件化？
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。
组件基本使用和基础
1、创建组件
//1、创建
//使用Vue中的extent创建
//关键词：extend
const conc = Vue.extend({
//template:`组件的内容`
template:`
<div>
<h2>我是标题</h2>
<p>我是内容，你好！<p>
</div>
`
});
2、注册组件
//2、注册
//Vue.component('命名',指定)
//关键词：component
Vue.component('con',conc);
3、使用组件
<body>
<div id="app">
<con></con>
</div>
<div>
<con></con>//无法编译，因为div没有el:"id"
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//1、创建
const conc = Vue.extent({
template:` <div>
<h2>我是标题</h2>
<p>我是内容，你好！<p>
</div>
`
});
//2、注册
Vue.component('con',conc);
var app = new Vue({
el:"#app"
})
</script>
</body>
效果
全局组件和局部组件
关键词：components、template
//2、注册,此时是注册了全局组件，所以有el的Vue都会显示
Vue.component('con',conc);
<div id="app">
<con></con>
</div>
<div id="app1">
<con></con>//这里也会显示
</div>
<script>
const conc = Vue.extend({
template:` <div>
<h2>我是标题</h2>
<p>我是内容，你好！</p>
</div>
`
});
const conc1 = Vue.extend({
template:` <div>
<h2>我是1</h2>
<p>我是内容,哈哈</p>
</div>
`
});
//2、注册,此时是注册了全局组件，所以有el的Vue都会显示
Vue.component('con',conc);
var app = new Vue({
el:'#app',
});
var app1 = new Vue({
el:'#app1',
})
</script>
用关键词：components进行注册局部组件
<div id="app2">
<con1></con1>//这里会显示
</div>
<div id="app3"><
最低0.47元/天 解锁文章
扫一扫
1477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
