Vue中组件

0828自我总结

Vue中组件

一.组件的构成

组件：由 template + css + js 三部分组成(.vue文件)

• 1）组件具有复用性

• 2) 复用组件时，数据要隔离

• 3) 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别

组件介绍：

• 1) 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
• 2) 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
• 3) 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
• 4) 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
• 5) template只能解析一个根标签

二.template的使用

用法一-把整个vue所关联的内容替换

    {{ msg }}

最后显示的效果为

message
message

其实他是先出现message

然后由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容

用法二-局部组件

局部组件可以分三步

• 创建组件
• 注册组件
• 网页中渲染

用法三-全局组件

使用到全局组件的内容必须用Vue进行挂载,如果不挂载全局组件只是个普通的自定义标签

注意点

• template中只能有一个根标签,如果有多个,只生效第一个
• template内容如果要多行显示方便观察的话用反引号`来代替双引号或者单引号

三.组件复用的数据隔离

1.局部组件中

• 把data里面值放function中当然了function可以不用写省略掉
• 而且不会受vue中msg影响,只受组件中的msg影响

2,全局组件中

    

// 这样就是个普通的自定义标签

特点和局部相同

四.组件信息交互父传子

简单总结

父级模板:属性名="父级的数据" v-for="ad in ads" :key="ad.img">

子级模板: props: ['属性名'],

五.组件信息交互子传父

    

        
        留言
    

        
    
    

简单总结

子级模板: 系统自带的属性="子级方法" class="del">x

子级实例方法中:this.$emit('自定义事件',子级数据们)

父级模板:自定义事件="父级的方法" v-for="(msg, i) in msgs" :key="msg">

父级方法: 父级的方法(子级的数据们){处理与子级相关的函数}