Vue中父子组件的传值

发布时间:2023-09-25 14:00

目录

父组件向子组件传值:

子组件向父组件传值:

父组件调用子组件方法:

子组件调用父组件方法


父组件向子组件传值:

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

\"\"

2。components注册组件,

\"\"

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

\"Vue中父子组件的传值_第1张图片\"

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

\"\"

子组件:通过props接收:

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

\"Vue中父子组件的传值_第2张图片\"

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

\"\"

子组件向父组件传值:

子组件通过¥emit()

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

\"\"

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

\"Vue中父子组件的传值_第3张图片\"

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

\"Vue中父子组件的传值_第4张图片\"

父组件接收传递的值:

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

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

\"\"

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

\"\"

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

\"Vue中父子组件的传值_第5张图片\"

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

\"Vue中父子组件的传值_第6张图片\"

父组件调用子组件方法:

子组件:

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

\"\"

2.在声明这个方法:

\"Vue中父子组件的传值_第7张图片\"

父组件:

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

ref类似key的效果

\"\"

2.引入子组件

\"\"

3.注册子组件

\"\"

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

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

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

\"Vue中父子组件的传值_第8张图片\"

子组件调用父组件方法

方法1:

父组件:

1.引入子组件

\"\"

2.注册子组件:

\"\"

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

\"Vue中父子组件的传值_第9张图片\"

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

\"\"

子组件:

1.创建事件:

\"\"

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

\"Vue中父子组件的传值_第10张图片\"

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

子组件:

1.创建子组件的方法:

\"\"

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

\"Vue中父子组件的传值_第11张图片\"

父组件:

1.引入子组件

\"\"

2.注册子组件

\"\"

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

\"\"

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

\"Vue中父子组件的传值_第12张图片\"

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

父组件:

1.引入注册子组件:

\"\"

2.添加方法:

\"Vue中父子组件的传值_第13张图片\"

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

\"\"

子组件:

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

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

2。创建一个方法

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

3.触发调用方法

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号