深刻理解Vue中的组件（1）–基础篇github链接 （demo04持续更新中）
什么是组件？
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
在vue-cli中简单的理解。vue组件就是一个 .vue 文件，里面包含<template> <script><style>。
如下就是一个简单的组件，我们又称之为单文件组件。
<template>
<div class="hello">
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name: "Demo04",
data() {
return {
msg: "demo04 -- 深刻理解Vue中的组件"
};
},
created() {
console.log("实例创建完成");
},
mounted: function() {
this.$nextTick(function() {
});
},
methods: {
_handleClick() {
}
}
};
</script>
<style scoped lang="less">
.hello {
height: 200px;
h2 {
background: #dcdc3e;
}
}
</style>
使用组件
全局组册
如我们在文件夹中编写一个Header.vue组件，并在main.js中引入，注册为全局组件 //在main,js中引入组件Header,并组册为全局组件 import Header from './assets/header/header.vue'; Vue.component('Header',Header) --------------------------------------- 在damo04.vue渲染Header组件 <template> <div class="hello"> <Header/> <h2>{{msg}}</h2> </div> </template>局部组册
你不必把每个组件都注册到全局。
你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：
如app.vue组件，局部组册了很多组件<template> <div id="app"> <!--第三步 在template 中渲染组件--> <!-- <Demo01/> <hr> <Demo02/> <hr> <Demo03/> <hr> --> <Demo04/> </div> </template> <script> //第一步 引入Demo01 组件 import Demo01 from './components/demo01/demo01' import Demo02 from './components/demo02/demo02' import Demo03 from './components/demo03/demo03' import Demo04 from './components/demo04/demo04' export default { name: 'App', //第二步 在components 中注册组件 components: { Demo01, Demo02, Demo03, Demo04, } } </script> <style> </style>
组件组合
组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。
父组件demo04源码
<template>
<div class="hello">
<Header/>
<h2>{{msg}}</h2>
<!--父组件通过message向子组件传递数据-->
<!--子组件数据通过sendCount传递过来，父组件通过_handleCount()方法接受-->
<submit-com message="hello!" @sendCount="_handleCount"></submit-com>
</div>
</template>
<script>
import submitCom from './children/submit'
export default {
name: "Demo01",
data() {
return {
msg: "demo04 -- 深刻理解Vue中的组件",
topic:"hello"
};
},
created() {
console.log("实例创建完成");
},
mounted: function() {
this.$nextTick(function() {
});
},
components: {
submitCom
},
methods: {
_handleClick() {
console.log(111);
},
//接受子组件传递的数据，并打印
_handleCount(data){
console.log(data);
}
}
};
</script>
<style scoped lang="less">
.hello {
height: 200px;
h2 {
background: #dcdc3e;
}
}
</style>子组件submit源码
<template>
<div class="hello">
{{msg}}
{{message}}
{{count}}
<el-button round @click="_handleClick()">圆角按钮</el-button>
</div>
</template>
<script>
export default {
name: "Demo01",
data() {
return {
msg: "submit组件",
count:0
};
},
// 通过props从父组件中接受数据，变成组件内部数据
props:["message"],
created() {
},
mounted: function() {
this.$nextTick(function() {
});
},
comments: {
},
methods: {
_handleClick() {
this.count++;
//向父组件传递数据 count
this.$emit('sendCount', this.count)
}
}
};
</script>
<style scoped lang="less">
.hello {
height: 200px;
h2 {
background: #dcdc3e;
}
}
</style>
