vue.js的组件可以继承吗

JavaScript026

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)//传过来的参数值

                })