码迷,mamicode.com
首页 > 其他好文 > 详细

vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

时间:2020-02-06 23:36:43      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:default   事件总线   嵌套   自定义   mit   on()   维护   asc   模板   

### 什么是组件?

    将代码进行复用
    组件是实例的拓展子类
    组件继承自实例,实例有的组件大部分都有,稍有变异

### 组件创建

    创建组件模板的2种方式:
        1、通过template标签     template:"#tpl"
        2、通过字符串模板   template:"<h1>吴启浪</h1>"

### 全局组件

    所有的实例都可以使用
    Vue.component("wql",{
        template:"<h1>吴启浪</h1>"
    })

### 局部组件

    注册到实例内部的components,只有注册实例可以使用
    let vm=new Vue({
        el:"#app",
        data:{},
        components:{
            "wql":"<h1>吴启浪</h1>"
        }
    });

### 组件嵌套

    全局组件嵌套,哪里都能用,没有严格的规定父子和子父
    局部组件嵌套,子组件只能在父组件中使用,严格按照实例中的父子关系渲染

### 组件传值

    父传子:props属性
        1、在子组件中,props用来接收自定义属性的值,这个值可以在该组件中使用
        2、这个值只能拿来用,不能改
        3、自定义属性的值为变量或表达式时,在前面加  :
        4、接收方式:数组----props:["hehe"],对象----props:{hehe:{type:number,default:100,required:true}}
            type----限制外部数据的类型
            default----默认值,当父组件没有给子组件传值时使用默认值
            required:true----表示当前属性是必传的值(和default二选一)

    子传父:$emit()属性----触发本组件身上的自定义方法
        给当前子组件绑定一个自定义方法,值为接收参数的函数(这个函数不带括号),在子组件内部通过this.$emit()来调用自定义方法。
        $emit("hehe",100)
            hehe----自定义事件名
            100----参数
    
    非父子
        亲兄弟之间:子组件控制父组件的显示和隐藏
        远方亲戚:Eventbus(事件总线)
            let bus=new Vue();  创建一个空实例
            bus.$on();  在实例上注册事件
            bus.$emit();    触发实例上$on注册的事件

    远方亲戚
        事件总线(eventbus):
            let bus=new Vue();  // 空实例   on----可以在实例上注册一个事件,emit----可以触发通过on注册的事件




### Q:


    1、为什么组件中的data不是一个对象而是一个函数

        如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也会随之改变,只有当两个实例拥有自己的作用域时,才不会互相干扰。
        这是因为JavaScript的特性所导致,在组件中,data必须以函数的形式存在,不可以是对象。
        组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己的私有数据空间,他们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个就全都改了。

vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

标签:default   事件总线   嵌套   自定义   mit   on()   维护   asc   模板   

原文地址:https://www.cnblogs.com/wuqilang/p/12271314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!