什么是组件? 组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同 的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以直接调用对应的组件即可。
组件化和模块化的不同:
模块化: 是从代码的逻辑角度进行划分的,方便代码的分层开发,保证每个功能模块的职能单一,后端一般是指模块化
组件化:是从ui界面的角度进行划分的,方便UI组件的重用,前端的组件
注意:组件中只有一个根元素
如果要使用组件,直接把组件的名称,以html标签的形式,引入到页面中即可。
利用Vue.component来创建全局vue组件,参数1: 组件的名称, 参数2:创建出来的组件模板对象,组件将来要展示的内容
vue实例:被称为根组件,根组件内部可以嵌套大量的组件,默认情况下,在子组件中,无法调用根组件或者父组件内部的数据,即组件的作用域是独立的,所以父子组件之间必须传值。
vue中组件的作用域是独立的,父往子传值是逐层传值的,而子往父传值是自定义事件
父子组件: -----类似于父子元素的判断(根组件是唯一的)
1. 组件A的模板内容包含了组件B,组件A是父组件,组件B是子组件
2. 子组件不能直接使用父组件中的数据,父组件必须传值,子组件必须接收,然后才能 使用,并受父组件数据改变的影响
3. 父组件传递的值,默认不能修改,否则会报错
组件中也有自己的data,组件中的data和实例的data有点不一样,实例中的data可以是个对象,但是组件中的data必须是个方法,组件中的data除了必须是个方法之外,这个方法的内部,还必须返回一个对象才可以。
1. 父往子传值
1. 根组件、父组件,将要传递的数据(动态数据)作为属性放置在组件的开始标签中----属性名自定义,属性值为传递的data变量,即<my-com :str="msgRoot">
2. 在子组件中通过props属性接受传递的数据,(即元素名为属性名)
3. 在组件模板中,直接调用当前的元素即可,一旦父组件中的数据发生改变,子组件中的数据也随之改变
子组件中,无法访问到父组件中的data上的数据和methods中的方法
注意:子组件中的data数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通过ajax请求回来的数据,都可以放到data身上,子组件data中的数据,是可读可写的。
子组件通过props属性接受父组件传递过来的数据,props中的数据,都是只读的,无法重新赋值,组件中的所有的props中的数据,都是通过父组件传递给子组件的,把父组件传递过来的属性,先在props数组或者对象中定义一下,这样才能使用这个数据。
2. 单向数据流(为了解决子组件的数据跟着改变的问题)
1. 默认情况下,父往子传值的过程中,子组件中的值会受父组件中的值变换的影响
2. 在子组件中, 不能随意更改直接传递过来的值,虽然会有效果,但会报错,所以不能修改传递的值
3. 如果在子组件中想修改传递的值,只需要在子组件中声明一个变量接收值即可,后期调用时,只需要调用当前的变量
3. 父往子传值2
1. 根组件、父组件,将要传递的数据(动态数据)作为属性放置在组件的开始标签中----属性名自定义,属性值为传递的data变量,即<my-com :str="msgRoot">
2. 在子组件中通过props属性接受传递的数据,(即元素名为属性名)
3. 在子组件的data中声明一个变量,接受props中传递的数据,后期使用过程中调用该变量即可
props属性的值可以是数组也可以是对象,当以对象存在的时候,用来做数据验证,类似于Schema数据结构。
数据验证:传递的数据必须符合当前的数据类型
属性名: 接收的数据变量名
属性值: 当前数据的验证信息,数据类型,默认值等
如果以数组的形式接收,表示该值可以是任意的一种类型。
4. 子往父传值
子往父传值的步骤:
1. 在子组件的某个方法中,通过调用$emit来发射一个自定义事件,即this.$emit(自定义的事件名称,需要传递的值也就是子组件中的data数据中的变量名)
2. 父组件在使用子组件的位置上(子组件的开始标签),通过V-on监听子组件发射过来的事件,functionName是父组件声明的,即@自定义方法的名称,即@子组件自定义的事件名称=自定义的方法名称,执行函数可以不加括号,会自动接收传递的数据。
3. 在父组件的function中,调用某个变量接受传递的数据