美文网首页
Vue --- 组件化

Vue --- 组件化

作者: super_girl秘密基地 | 来源:发表于2021-07-11 13:29 被阅读0次

组件化让代码更加方便组织和管理,并且扩展性也更强

组件化基本使用过程:

创建组件构造器:cpnC = Vue.extend ({template:  })

注册组件:Vue.component('标签名','组件名')

使用组件:在html标签里使用

全局组件:在script标签中直接注册

局部组件:在Vue实例中用components属性注册

父组件与子组件,Vue实例属于root组件

注册组件语法糖:Vue为了简化这个过程,提供了语法糖的形式,主要是省去了创建组件构造器Vue.extend()的步骤,直接使用一个对象来代替

组件模板抽离的写法:

使用script的标签:必须使用text/x-template类型

使用template标签:(在template标签中如果有多个标签的话,要同时包含在一个跟标签里,比如说同一个div中)

组件数据的存放:(不能通过在Vue实例中的data属性使用)

组件对象也有一个data属性(也会有mothods等属性)

组件的data属性必须是一个函数,而且这个函数要求返回一个对象,返回的这个对象内部存放数据(必须是一个函数的原因是在使用多次组件时不产生相互影响)

父传子的组件通信:用props属性,既可以传数组类型也可以传对象类型

子传父的组件通信:发射一个事件(自定义事件)

在子组件中,通过$emit( )来触发事件

在父组件中,通过v-on来监听子组件事件

父访问子的组件通信:(父组件访问子组件的某个事件)

$children:得使用下标值去获取,不灵活

$refs:要在标签中写入ref属性去获取。使用灵活

子访问父的组件通信:(子组件访问父组件的某个事件)

$parent:访问到的是挨着最近的父组件

$root:访问到的是根组件,返回的是一个Vue实例的事件

组件的插槽slot:为了让t封装的组件更具有扩展性

编译作用域:父组件模板所有东西都会在父级作用域内编译,子组件模板所有东西都会在子级作用域内编译

作用域插槽的使用:

具名插槽:给slot标签一个name属性,在使用时传入对应name的slot属性

作用域插槽:父组件对子组件传过来的插槽不满意,可以在父组件的插槽中改动

相关文章

  • Vue组件和父子组件

    【一】Vue组件化 创建组件构造器对象Vue.extend() 创建组件构造器const cpnc = Vue.e...

  • Vue.js的组件化思想 —上

    一、Vue中的组件 Vue视图层的灵魂 — 组件化 组件(Component)是 Vue.js 最强大的功能之一...

  • (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定组件双向绑定组件单次绑定 创建组件构造器注册组件使用组件 Vue.extend()...

  • 大话大前端时代(一) —— Vue 与 iOS 的组件化

    大话大前端时代(一) —— Vue 与 iOS 的组件化 大话大前端时代(一) —— Vue 与 iOS 的组件化

  • vue

    1、什么是组件化、有什么好处、vue如何创建组件、vue组件之间如何通信 什么是组件化。任何一个页面我们都可以抽象...

  • Vue组件化

    定义Vue组件化 什么是组件化:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的...

  • vue-5

    组件(可复用的vue实例) 注册组件必须在Vue实例化之前全局组件(跨vue实例)组件的data选项必须是一个函数...

  • Vue实践与总结——组件与数据

    Vue实现组件化流程 Vue提供了一套构建组件的API,用于声明和实现 根组件,可复用组件 Vue库提供了名为Vu...

  • vue组件化思想

    组件化 组件化是vue的核心思想,主要是为了代码重用。 组件通信 父组件=>子组件 属性props 引用refs ...

  • vue基础概念介绍

    组件化 vue的组件化是指把传统的html, css, js资源集成到一个.vue文件中,组成一个单独的组件,被其...

网友评论

      本文标题:Vue --- 组件化

      本文链接:https://www.haomeiwen.com/subject/kqykpltx.html