有没有卖设计的网站,为什么手机网站跳转页面上,什么是网络营销促销?,wordpress导航分类怎么添加new父组件向子组件传递参数
方法一#xff1a;props
在 Vue 中#xff0c;父组件向子组件传递数据主要通过props来实现#xff0c;以下是具体的步骤#xff1a;
父组件中传递数据
在父组件中#xff0c;当需要调用子组件 AddSampleDialog 时#xff0c;通过 v-bind 或其…父组件向子组件传递参数
方法一props
在 Vue 中父组件向子组件传递数据主要通过props来实现以下是具体的步骤
父组件中传递数据
在父组件中当需要调用子组件 AddSampleDialog 时通过 v-bind 或其缩写:绑定要传递的数据。
v-bind或其缩写:用来动态的绑定一个或者多个属性或者向另一个组件传递props值
假设要传递一个名为 sampleData 的对象数据给子组件可以这样写
AddSampleDialog refaddSampleDialog:titlesample_dialog_title:projectIdprojectId:sample_formsample_formnewDataAddedgetSample
/AddSampleDialog
这里的sampleData是父组件中的数据可以是在data函数中定义的也可以是通过computed计算属性得到的或者是从接口获取到的数据等。
子组件中接收数据
在子组件AddSampleDialog中通过props选项来接收父组件传递过来的数据。在AddSampleDialog组件的script部分添加如下代码
export default {name: AddSampleDialog,props: {sampleData: {type: Object, // 根据实际传递的数据类型进行修改required: true // 如果该数据是必须的可以设置为true}},created() {console.log(接收到的数据, this.sampleData);}
}
在上述代码中props定义了一个名为sampleData的属性指定了其数据类型为Object并在created钩子函数中打印出接收到的数据可以根据实际需求在子组件的其他地方使用该数据。
方法二ref
在子组件AddSampleDialog中的data函数中定义一个值 dialogVisible 用于控制该子组件是否显示
data() {return {dialogVisible: false,}
}
在父组件中可以通过 ref 给子组件添加一个引用父组件通过这个引用可以在JavaScript中直接访问该元素或者子组件
AddSampleDialog refaddSampleDialog:titlesample_dialog_title:projectIdprojectId:sample_formsample_formnewDataAddedgetSample
/AddSampleDialog
在父组件的任何方法中可以通过 this.$refs.addSampleDialog 这个引用访问或修改子组件的属性 dialogVisible
showAddDialog() {this.$refs.addSampleDialog.dialogVisible true;
},
子组件向父组件触发自定义事件
场景新增信息子组件新增数据后需要让父组件table获取最新数据
使用$emit和v-on 原理子组件通过$emit向父组件触发一个自定义事件并将新增的数据作为参数传递给父组件父组件在模板中通过v-on或其缩写$监听该事件在事件处理函数中更新table的数据。 示例代码 子组件中触发事件在dialog子组件中当新增数据成功后通过$emit触发一个自定义事件newDataAdded并将新增的数据作为参数传递。 注意newData作为参数可填可不填
this.$emit(newDataAdded, newData);
// or
this.$emit(newDataAdded); 父组件中监听事件并更新数据在父组件的模板中使用v-on监听dialog子组件的newDataAdded事件在事件处理函数中更新table的数据。
templatedivtable-component :datatableData/table-componentdialog-component newDataAddedhandleNewDataAdded/dialog-component/div
/template
script
import TableComponent from ./TableComponent.vue;
import DialogComponent from ./DialogComponent.vue;
export default {components: {TableComponent,DialogComponent},data() {return {tableData: []};},methods: {handleNewDataAdded(newData) {this.tableData.push(newData);}}
};
/script
