Vue的组件化

Vue的组件化

组件：

将一个页面复杂的逻辑拆分成一个个小小的功能块，每个功能块都能完成属于自己部分的独立的功能，那么之后整个页面的管理和维护就会变得非常容易

Vue组件化思想：

它提供了一种抽象，让我们可以开发出一个个独立的可复用的小组件来构造我们的应用

任何应用都会被抽象成一颗组件树

组件化思想应用：

有了组件化思想，我们在之后开发中就要充分利用它

尽可能将页面拆分成一个个小的，可复用的组件

这样让我们的代码更加方便组织和管理，并且扩展性也更强

注册组件的基本步骤：

• 组建的注册分成三个步骤

  • 创建组件构造器：调用Vue.extend()方法
  • 注册组件：调用Vue.component()方法
  • 在Vue实例的作用和范围内使用组件

	<div id="app">
			<!-- 在Vue实例作用域使用组件 -->
			<my-cpn></my-cpn>
		</div>

		<script src="js/vue.js" ></script>
		<script>
			//1.创建组件构造器对象
			const cpnC = Vue.extend({
				template:`
				<div>
				<h2>title</h2>
				<p>hello world</p>
				<p>hello Vue</p>
				</div>`
			})
			//2.注册组件
			Vue.component('my-cpn', cpnC)
			const app = new Vue({
				el: "#app",
				data: {
					message: "你好"
				}
			})
		</script>

全局组件和局部组件：

之前介绍的组件注册使用方法创建的都是全局组件，若要创建局部组件，只需将注册步骤放到需要局部使用的Vue实例对象中声明就可以了

const app = new Vue({
				el: "#app",
				data: {
					message: "你好"
				},
				components: {
					'my-cpn': cpnC 
				}
			})

父组件和子组件：

*注：组件的作用域只能包括在所注册的组件内部

注册组件的语法糖：

 //注册组件语法糖写法

        Vue.component('cpn1', {
            template:`
            <div>
                <h2>这是组件-1</h2>
                <p>hello world</p>
                <p>hello Vue</p>
            </div>`
        })
        
        //root组件
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好"
            },
            components: {
                //局部组件注册语法糖
                'cpn2': {
                template:`
                <div>
                    <h2>这是组件-2</h2>
                    <p>hello world</p>
                    <p>hello Vue</p>
                </div>`
                }
            }
        })

组件模板抽离的写法：

刚才我们通过语法糖简化了注册组件过程，另外还有一个地方写法比较麻烦，那就是template模板的写法。

如果我们能将其中HTML分离出来写，然后挂载到对应组件上，必然结构会变得更清晰

Vue提供了两种方案来定义HTML模板内容：

使用script标签

使用template标签

<!-- 组件模板的分离写法 -->
    <!-- 1. script标签，注意：类型必须是text/x-template -->
    <script type="text/x-template" id="cpn">
        <div>
            <h2>我是标题2</h2>
            <p>我是内容，哈哈哈哈哈</p>
        </div>
    </script>

    <!-- 2. template标签 -->
    <template id="cpn">
        <div>
            <h2>我是标题2</h2>
            <p>我是内容，哈哈哈哈哈</p>
        </div>
    </template>

    <script src="js/vue.js" ></script>
    <script>
        Vue.component('cpn1', {
            template:`#cpn`
        })
        
        //root组件
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好"
            }
        })
    </script>
</body>

组件可以访问Vue实例的数据吗？

答案是不能。

• 组件是一个单独功能模块的封装
  • 这个模板有属于自己的HTML模型，也应该有属于自己的数据data。

组件自己的数据存放到哪儿了呢？

• 组件对象也有一个data属性（也可以有methods等属性）
• 只是这个data属性必须是一个函数
• 而且这个函数返回一个对象，对象内部保存着数据

若组件多次使用，那么这几个组件是否共用一个data呢？

答案也是不。

• 每个组件data返回的函数都开辟了一个新的空间，创建了一个新的对象将data的返回值赋给其新建对象。
• 组件中的数据data用函数来表示就是为了达到组件复用数据互不干扰

  //组件中数据data用return返回来表示          
	data() {
                return {
                    count: 0
                }
            }