Vue中父子组件的传值

父组件向子组件传值：

1。父组件中先引入子组件，

2。components注册组件，

3。data中return中写传递的数值

4。使用注册完成的组件标签，放上传递的数值。和给定一个传递的属性名例如:inputName

子组件：通过props接收：

1.创建props对象：对象中放入父组件给定传递的属性值加传递的属性类型。

2.子组件在{{}}中使用父组件所给定的属性值即可接收到。

子组件向父组件传值：

子组件通过￥emit()

1.先创建一个事件绑定。

2.使用事件：this.$emit[事件名称][数据]，定义一个传递过去的事件名称和传递的数据

3.在data中定义传递的数据容器：message

父组件接收传递的值：

1.通过子组件emit传递过来一个给定的事件名称创建函数事件：

当前child为注册子组件时给定的属性值并赋予函数变量：

2.获取子组件数值方法。

3.在data给定获取到数据存放的容器：自定义

4.使用函数变量把获取到的值作一个处理：

父组件调用子组件方法：

子组件：

1.先给子组件绑定一个方法

2.在声明这个方法：

父组件：

1.定义一个函数，在此函数中调用子组件中的方法

ref类似key的效果

2.引入子组件

3.注册子组件

4.获取子组件的方法并调用它：

onload()为当页面载入完毕后执行javascript代码：

注意：这里在onload中直接调用子组件中的函数，会报错：Error in onLoad hook: "TypeError: Cannot read properties of undefined (reading 'childMethod')"

子组件调用父组件方法

方法1：

父组件：

1.引入子组件

2.注册子组件：

3.父组件调用函数方法：

4.标签添加注册的组件：

子组件：

1.创建事件：

2.通过$parent获取父组件。

方法2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

子组件：

1.创建子组件的方法：

2.通过emit传递给父组件一个监听事件：

父组件：

1.引入子组件

2.注册子组件

3.获取子组件传递过来的监听并给他一个事件：

4.使用触发赋予的事件：

方法3：将父组件中的方法传入子组件后，在子组件直接调用这个方法。

父组件：

1.引入注册子组件：

2.添加方法：

3.传递给注册的组件标签：

子组件：

1.通过props：{}获取到父组件的传值

props: {
             parentMethod: {
                 type: Function,
                 default: null
              }
          },

2。创建一个方法

methods:{
            childMethod() {
                this.parentMethod();
           } 
        }

3.触发调用方法