目录

父组件向子组件传值:

子组件向父组件传值:

父组件调用子组件方法:

子组件调用父组件方法


父组件向子组件传值:

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

Vue中父子组件的传值

2。components注册组件,

Vue中父子组件的传值

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

Vue中父子组件的传值

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

Vue中父子组件的传值

子组件:通过props接收:

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

Vue中父子组件的传值

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

Vue中父子组件的传值

子组件向父组件传值:

子组件通过¥emit()

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

Vue中父子组件的传值

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

Vue中父子组件的传值

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

Vue中父子组件的传值

父组件接收传递的值:

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

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

Vue中父子组件的传值

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

Vue中父子组件的传值

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

Vue中父子组件的传值

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

Vue中父子组件的传值

父组件调用子组件方法:

子组件:

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

Vue中父子组件的传值

2.在声明这个方法:

父组件:

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

ref类似key的效果

Vue中父子组件的传值

2.引入子组件

Vue中父子组件的传值

3.注册子组件

Vue中父子组件的传值

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

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

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

Vue中父子组件的传值

子组件调用父组件方法

方法1:

父组件:

1.引入子组件

Vue中父子组件的传值

2.注册子组件:

Vue中父子组件的传值

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

Vue中父子组件的传值

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

Vue中父子组件的传值

子组件:

1.创建事件:

Vue中父子组件的传值

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

Vue中父子组件的传值

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

子组件:

1.创建子组件的方法:

Vue中父子组件的传值

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

Vue中父子组件的传值

父组件:

1.引入子组件

Vue中父子组件的传值

2.注册子组件

Vue中父子组件的传值

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

Vue中父子组件的传值

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

Vue中父子组件的传值

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

父组件:

1.引入注册子组件:

Vue中父子组件的传值

2.添加方法:

Vue中父子组件的传值

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

Vue中父子组件的传值

子组件:

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

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

2。创建一个方法

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

3.触发调用方法

发表回复