vue组件传值

什么是组件？ 组件的出现，就是为了拆分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中，调用某个变量接受传递的数据