vue.js组件化开发
什么是组件？
组件：就是一个带着名字的可复用vue实例
组件实现的步骤？
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3、使用组件-->
<my-cpn></my-cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>Title</h2>
<p>Context</p>
</div>`
})
//2、注册组件
Vue.component(\'my-cpn\', cpnC);
//实例化vue对象
const app = new Vue({
el: \'#app\',
data: {
},
methods: {
}
})
</script>
</body>
</html>
组件实现说明：
1、创建组件构造器：Vue.extend(将模板添加到里面)，其实现在已经不用这种格式了，但是不管我们怎么进行创建，底层还是一样的。
2、注册组件:Vue.component(\'使用标签名\',\'注册标签名\')
（1）全局组件：vue实例外注册的组件
（2）局部组件：vue实例内部注册的组件
3、使用组件:（必须在vue实例关联的dom文件中）
<div id="app">
<my-cpn></my-cpn>
</div>
什么是组件化？
组件化：是一种思想，解决对复杂问题简单化的思想，将我们的程序开发成一个个独立可复用的小组件，然后用这些个小组件来构造出我们的应用。
如下图：
组件化开发的好处？
灵活可扩展，复用性强…
组件化开发整体流程？
1、封装组件
2、导入已经封装好的组件
3、在使用页面注册被使用组件
4、使用已封装好的组件
代码实例：
一、需要封装的组件：个人认为组件的封装还是比较简单的，任何功能需要重复使用都可以进行封装成组件
<template>
<!-- 封装组件 -->
<div>
Hello EveryOne! I\'m Jason!
</div>
</template>
<script>
export default {
name: "HelloTest"
}
</script>
<style scoped>
</style>
二、使用组件：这个一般都是比较固定的流程，先是引入要使用的组件，然后注册引入的组件，最后就可以直接使用了
<template>
<div>
<!--使用组件-->
<HelloTest></HelloTest>
</div>
</template>
<script>
// 导入要使用的组件
import HelloTest from \'./hello\'
export default {
name: "hello",
// 注册组件
components: {
HelloTest
}
}
</script>
<style scoped>
</style>
以上是 vue.js组件化开发 的全部内容， 来源链接： utcz.com/z/375113.html
