Vue - day3

作者: 小浅_ | 来源:发表于2018-08-16 08:31 被阅读0次

    day3

    Vue 组件

    定义Vue组件

    什么是组件:

    组件的出现, 就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能, 将来需要什么功能, 直接调用对应的组件即可.

    模块化组件化概念的解读

    • 什么是模块化:是从代码的角度分析问题;把可复用的代码,抽离为单独的模块;
      • CommonJS 模块化规范;
    • 模块化的好处:提高了代码的复用率,提供模块作用域的概念,防止全局变量污染;方便了程序员之间 代码互相调用;
    • 什么是组件化:组件化是从页面UI的角度进行分析问题的;把页面中可复用的UI结构,抽离为单独的组件;
      • 组件化的好处:方便了 UI 结构的重用;随着项目开发的深入,手中可用的组件会越来越多;elementUI

    定义全局组件

    1. 定义组件的语法
      • Vue.component('组件的名称', { 组件的配置对象 })
    2. 使用组件的语法
      • 组件的名称, 以标签的形式,引入到页面上就行;

    注意: 从更抽象的角度来说,每个组件,就相当于是一个自定义的元素

    注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!

    定义私有组件(父子组件)

    components

    组件中定义data数据methods方法以及生命周期函数

    组件和实例的相同和区别:

    1. 组件中的 data 必须是一个 function 并 return 一个 对象;在 Vue 实例中,实例的 data 既可以是 对象,也可以是 方法;
    2. 组件中,通过 template 属性来指定组件的UI结构;在 Vue 实例中,通过 el 属性来指定实例控制的区域;但是实例也可以使用 template;
    3. 组件和实例,都有自己的生命周期函数私有的过滤器methods 处理函数;

    为什么组件中的data属性必须定义为一个方法并返回一个对象

    1. 通过计数器案例演示

    总结: 因为这样,能够保证每次创建的组件实例,都有自己的一块唯一的数据内存(对象),防止组件之间数据的干扰;

    使用 <component>标签实现组件切换

    1. <component> 是Vue提供的;作用是 把 is 指定的 组件名称,渲染到 <component> 内部
    2. 身上有一个 :is属性

    多个组件切换 -- 应用动画 和 mode 方式

    <transition mode= 'out-in'>
        <component :is='conName'></component>
    </transition>
    

    组件传值

    父传子 props-down

    • 组件中的props 中的数据, 都是通过父组件传递给子组件中的

    • props 中的数据, 都是只读的 data 是可读可写的

    传递方法: 使用的是 事件绑定机制 v-on 通过 this.$emit('fun',参数,...) 这个参数可以传递给父组件 相当于传值给父组件

    子传父

    • 通过 this.$emit()

    相关文章

      网友评论

        本文标题:Vue - day3

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