目录
父组件向子组件传值:
子组件向父组件传值:
父组件调用子组件方法:
子组件调用父组件方法
父组件向子组件传值:
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.触发调用方法