组件标识

最近做项目中需要使用到流工作在这里流工作需要用到父子传值所以对vue中的父子传值进行研究并总结。

父子传值是指在程序中父组件向子组件传递数据的过程。

在前端开发中父子组件通常是指父组件包含一个或多个子组件子组件嵌套在父组件中。

父子传值可以通过props属性来实现。

父组件可以通过props将数据传递给子组件子组件可以通过props接收父组件传递的数据。

这样父组件和子组件之间就可以进行数据的传递和共享。

父组件传递给子组件的数据可以是任意类型包括基本类型如字符串、数字、布尔值等和复杂类型如对象、数组等。

子组件可以通过props接收父组件传递的数据并在子组件中使用这些数据进行渲染或其他操作。

父子传值可以实现组件之间的数据共享和通信使得组件之间可以相互传递和使用数据提高了组件的复用性和灵活性。

通过父子传值可以实现组件的嵌套和组合构建出更复杂的界面和功能。

需要注意的是父子传值是单向的即父组件可以向子组件传递数据但子组件不能直接修改父组件传递的数据。

如果需要修改父组件的数据可以通过触发事件或回调函数的方式将子组件中的数据传递给父组件进行处理。

这样可以实现子组件向父组件传递数据的需求。

二、业务场景

比如现在在子页面中获取后端的返回值需要把子页面中的值传给父页面。

子传父

/views/system/project/authProjectRole.vue;对应的在compoents中进行注册

export

update-project-idupdateProjectId/addProject2、子传父父组件标识

这里在父组件中引入的子页面中通过update-project-idupdateProjectId进行标识其中update-project-id是自定义的名称

updateProjectId是绑定的方法用于接收子组件传入的值

{this.newProjectIds

在页面中通过this.$emit去触发父组件中的标识子组件的方法update-project-id这样他们通过update-project-id进行传递信息

this.newProjectId);

templatedivh1父组件/h1ChildComponent

:messagemessage/ChildComponent/div

/templatescript

/script在父组件中通过:messagemessage的方式将父组件中的message数据传递给子组件。

子组件中使用props属性来接收父组件传递的值并在模板中使用{{

message

通过这种方式父组件可以将任意类型的数据传递给子组件并在子组件中使用这些数据进行渲染或其他操作。

需要注意的是父组件传递给子组件的数据是单向的子组件不能直接修改父组件传递的数据。

如果需要修改父组件的数据可以通过触发事件或回调函数的方式将子组件中的数据传递给父组件进行处理。

bindingRole

prevStepprevStep/bindingRole在父组件中的方法中使用this.$refs.myBindingRole.子组件方法();

this.$refs.myBindingRole.getList(this.newProjectIds);总结

需要注意的是父子组件传值是单向的即父组件可以向子组件传递数据但子组件不能直接修改父组件传递的数据。

如果需要修改父组件的数据可以通过触发事件或回调函数的方式将子组件中的数据传递给父组件进行处理。

通过父子组件传值可以实现组件的嵌套和组合构建出更复杂的界面和功能提高组件的复用性和灵活性。