vue.js的组件可以继承吗

JavaScript024

vue.js的组件可以继承吗,第1张

在 1.0.0 发布之前的版本中,inherit 选项是存在的,不过这个继承并不是如 Java 类那样的继承关系,而只是运行时子组件对父组件的继承关系,换言之,这里的继承只强调子组件从父组件继承方法和数据。

一、$emit传值:用于子组件向父组件传值,但是只能传数据,不能传方法 二、通过$parent传值(子组件获取父组件数据) 适用于父组件给子组件传值 三、通过$root传值(后代组件获取祖先组件数据) 四、通过$children传值(父组件获取子组件数据) 五、 children:返回的是所有子组件对象的数组,再通过下标获取指定的子组件。当组件顺序不会发生变化时,用 refs。注意: $refs:返回的是一个对象,对象中包含所有带有ref属性的子组件。 注意:不是只有组件才可以添加ref属性,任何标签都可以加ref属性 。 注意:在父组件创建完成到挂载完成之间,包含完整的子组件的生命周期。父级组件在mounted生命周期函数内,才能获取到$children信息;在子组件的created生命周期函数中,可以获取到父组件的数据。顺序:父级created =>子级1created =>子级2created =>=>子级1mounted =>子级2mounted =>父级mounted

1、父子传参

 父组件向子组件传值

父向子

父组件上边,在要接受数据的组件上通过动态属性传递

:data="data"

子组件通过props属性接受

1.数组

    props:['title','count','imgs','styles'],

2.对象

    属性名类型 Object | Array | String | Numeber | Boolean | Function

    props:{

        title:Array,

    }

    props:{

        属性名:{

            type:类型,

            required:必填项,默认值为false,

            defalult:默认值,(如果是简单值的话,直接设置,如果是数组或者对象的话,需要一个函数),

            validator(val){

            自定义格式的验证,函数return 成立

            }

        }

    }

    vue 是单向数据流,不能在子组件里面直接修改父组件传递过来的值

   子向父

        子组件里边使用$emit

    $emit('事件名称','实参1','实参2')

    <button @click="$emit('addCount',count)"></button>

    @事件名称 = "事件处理程序"

    父组件接受的方法

        @addCount = "方法名"

        在methods方法里面写函数

        addCount(){

            console.log(1)

        }

      非父子

            3通过创建一个空对象

            在 main.js 里面Vue.prototype.$bus=new Vue()

            所有的组件都是通过vueComponent 实例出来的 vueComponent继承vue

            子组件

              传参的方式:  this.$bus.$emit('add',item)

                在created方法里面接受

                this.$bus.$on('add',(obj)=>{

                    console.log(obj)//传过来的参数值

                })