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模板内容：

使用

踩

(0)

赞

(0)

   

举报

评论 一句话评论（0）

登录后才能评论！