什么是组件化开发:
组件化开发指的是：根据封装思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。
Vue是一个支持组件化开发的前端框架，vue中规定：组件的后缀名为.vue。
每个.vue组件都由3部分构成，分别是：
template->组件的模板结构
script->组件的JavaScript行为
style->组件的样式
首先创建一个text.vue文件
<!-- 先放结构 -->
<template>
<!-- 只能出现一个根元素，否则两个div并列会报错 -->
<div>
<div class="box">
<p >自定义一个属性{{user}}</p>
<button @click="change">修改用户名</button>
</div>
<div>123</div>
</div>
</template>
<!-- js在中间 -->
<script>
// 默认导出
export default{
// 注意：组件中的data不能像之前一样，不能指向对象
// 组件中的data必须是一个函数，以下写法是会报错的
// data:{
// user:"张三"
// }
// 函数data：function（）{}省略写法
data(){
// return的对象可以定义数据
return{
user:"张三"
}
},
methods:{
change(){
// 在组件中，this表示当前组件的实例对象
console.log(this);
this.user="哈哈哈哈"
}
}
}
</script>
<!-- 样式最后 -->
<!-- 此处是css语法，启用less语法，在style加lang="less"即可 -->
<style lang="less">
.box{
background-color:blue;
}
p{
color:chartreuse;
}
</style>引入到main.js
// 导入vue这个包，得到vue构造函数
import Vue from 'vue'
// 导入app.vue根组件，将来要把app.vue中的模板结构，渲染到html页面中
// import App from './App.vue'
import text from "./text.vue"
// 导入需要被全局注册的那个组件
import count from "./components/count.vue"
// 第一个参数随便起，第二个是要注册的组件
Vue.component("MyCount","count")
// 阻止启动生产消息
Vue.config.productionTip = false
// 创建vue的实例对象
new Vue({
// el:"#app",
// 把render函数指定的组件，渲染到html页面中
render: h => h(text),
}).$mount('#app')
// .$mount('#app')和el："#app"效果一样，二选一此时在浏览器打开? http://localhost:8080/?就能出现如下效果
?
vue组件之间的父子关系：
- 组件在被封装好之后，彼此之间是相互独立的，不存在父子关系 。
- 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系，兄弟关系。
使用组件的三个步骤：
- 使用import语法导入需要的组件
- 使用components节点注册组件
- 以标签形式使用注册的组件（可以认为是自定义标签）
在components文件夹下创建left.vue和right.vue两个文件，另外在components外面创建一个App.vue文件
?
通过components注册的是私有子组件，如果想要注册全局可按如下方法
在vue项目的main.js入口文件中，通过Vue.component（）方法，可以注册全局组件。
1.App.vue
<template>
<div id="app">
<h1>app根组件</h1>
<div class="box1">
<!-- 渲染left子组件和right子组件 -->
<!-- 3.以标签形式，使用注册好的组件 -->
<left1>left组件</left1>
<right>right组件</right>
</div>
</div>
</template>
<script>
// 1.导入需要使用的.vue组件,此处import后的left的名字自定义可更改
import left1 from "@/components/left.vue"
import right from "@/components/right.vue"
export default{
// 2.注册组件
components:{
// left:"left"可简写成left
left1,
right
}
}
</script>
<style>
#app{
height: 200px;
background-color: aqua;
}
</style>2.left.vue
<template>
<div>
<p>left</p>
<MyCount></MyCount>
</div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
MyCount
}
}
</script>
<style>
</style>3.right.vue
<template>
<div>
<p>right</p>
</div>
</template>
<script>
import MyCount from "@/components/count.vue"
export default {
components:{
MyCount
}
}
</script>
<style>
</style>>4.main.js
// 导入vue这个包，得到vue构造函数
import Vue from 'vue'
// 导入app.vue根组件，将来要把app.vue中的模板结构，渲染到html页面中
// import App from './App.vue'
import App from "./App.vue"
// 导入需要被全局注册的那个组件
import count from "./components/count.vue"
// 第一个参数随便起，第二个是要注册的组件
Vue.component("MyCount","count")
// 阻止启动生产消息
Vue.config.productionTip = false
// 创建vue的实例对象
new Vue({
// el:"#app",
// 把render函数指定的组件，渲染到html页面中
render: h => h(App),
}).$mount('#app')
// .$mount('#app')和el："#app"效果一样，二选一效果如下：
?