vue组件化你怎么看？

GuangChaoz

于 2021-08-15 21:40:54 发布

阅读量108

点赞数

分类专栏：前端初识文章标签： vue js

本文链接：https://blog.csdn.net/DSDsesChao/article/details/119720570

版权

前端初识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue组件化你怎么看？

组件的使用必须在 Vue 实例挂载的 div 之内

拥有组件的三大步：

创建组件构造器

<!DOCTYPE html>
<html>
<script>
	const cpnC = Vue.extend({
		 template: ' //这里的template属性是html 模板的 意思
			 <div>
 				<h2>iiiiiii<h2>
 				<h3>sdfjsefi<h3>
 			</div>'
	})
</script>
<html>

注册组件

Vue.component('my-cpn',cpnC) 
 	//第一个参数是创建的标签名，
	//第二个参数是创建组件构造器的方法名
	//这样的注册方式注册的是全局组件</pre>

使用组件

组件实例对象

<body>
	<my-cpn></my-cpn>
 	<my-cpn></my-cpn>
 	<my-cpn></my-cpn>
</body>

组件简单点~

简化注册组件的方式：在 Vue 实例或其他组件构造器中添加 component 属性

<script>
	const app = new Vue({
		el:'#app',
		components:{
			cpn1:cpnC1,  //cpn1是指标签名，cpnC1是指构造组件方法名
			cpn2:cpnC2  //可以注册多个组件
		}
	})
</script>

组件的创建、注册可以在任意其他组件中，或者在 Vue 实例中
官方文档的注册方式

 Vue.component('my-component-name',{ })
//该组件名就是 Vue.component 的第一个参数

全局注册

直接通过 Vue 实例注册创建的组件意味着注册方式是全局的。也就是说他们再注册之后可以用在任何新创建的 Vue 根实例的（new Vue)的模板中

Vue.component('my-component-name',{
//..选项})

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

父组件与子组件的联系

如果是组件之间进行注册的话，那么最高级的组件其注册位置在 Vue 实例中，最高级不包括 Vue 实例，其实 Vue 实例是根组件

组件在哪里注册，就在哪里使用；在 Vue 实例中注册可以在全局中使用、在其他组件中注册只能在其他组件内使用

<script>
	const cpnC = Vue.extend({
        components:{
            cpn1:cpnC1,
            cpn2:cpnC2
        }
    })
</script>

组件的语法糖注册方式（创建组件的构造方法和注册一齐简写）

<script>  //省去组件的构造器方法（但是仍会调用extend），直接在注册组件中添加模板属性 template
	Vue.component('cpn1',{  //con1 是标签名
        template:{
            `
            <div>
                <h2>iiiiiii<h2>
                <h3>sdfjsefi<h3>
            </div>
            `
        }
    })
</script>

疑问在于，这样注册的组件算是全局组件还是局部组件呢？是算局部组件的，因为在组件内进行注册的，但是可以直接使用该组件

组件的 template 模板属性的抽离

1.把模版写在中,通过添加 id 属性和组件相关联

在组件的template属性中添加模板的id即可

<template id="cpn">
	<div>
     <h2>
         我是内容
    </h2>   
   </div>
</template>

<script>
	Vue.component('cpn',{
        template:'#cpn'
    })
</script>

2.使用 template 标签 ,同样的通过添加 id 属性和组件相关联

template 标签必须放在挂载区内

<div id = "app">
  <template id = "cpn">
		<div>
       <h2>
        我是标题
      	</h2>
      </div>
    </template>
</div>

<script>
	Vue.component('cpn',{
		template:'#cpn'
	})
   const app = new Vue({
       el:'#app'
   })
</script>

组件中的数据存放

data（）非对象类型

组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属于自己的数据 data（因为组件不能访问 Vue 实例中的data属性中的值，就算能访问，多个组件叠加的值不利于代码编写），组件拥有属于自己可以保存数据的地方

组件中的data属性为什么是一个函数

因为在重复使用同一个组件时，并不希望在修改其中一个组件的数据时其他组件的值也同时被修改，使用函数是为了让其中的每个组件的内存地址不同从而做到互不影响

<script>
	//注册组件
   const obj = {
       counter:0
   }
   Vue.component('cpn',{
       template:'#cpn',
       //data(){
           //return{
              // counter:0
           //}
       //}
       data(){
          return {
              obj
          } 
       }
   })
</script>

这种情况就是多个组件的值会同时被修改

props驼峰标识的转换

使用组件时，接受父组件的值通常会有利用驼峰标识定义的属性，这时我们需要利用 c- / 或者用 - 来连接词语

暂时标签内传值时不支持驼峰命名

<body>
    <div id = "app">
        <cpn :c-info = "info" :child-my-message = "message"></cpn>
    </div>
</body>

<script>
	const cpn = {
        template:'#cpn',
        props:{
            cInfo:{ }
        }
    }
</script>

<body>
    <div>
        <h2>
            {{cInfo}}
        </h2>
        <h2>
            {{childMyMessage}}
        </h2>
    </div>
</body>

当模板中的标签过多时，需要使用一个总标签将其括起来，否则会报错

<template id = "cpn">
	<div>
     <h2>
       {{cInfo}}    
     </h2>
   </div>
</template>

GuangChaoz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件化你怎么看？

组件化你怎么看？组件的使用必须在 Vue 实例挂载的 div 之内三大步：创建组件构造器<script>const cpnC = Vue.extend({ template: ' //这里的template属性是html 模板的意思 <div> <h2>iiiiiii<h2> <h3>sdfjsefi<h3> </div>'})</script>注册组件Vue.component(
复制链接

扫一扫