河南网站建设技术公司,做网站的收益,河北省建设局网站材料备案,如何得知网站有没有做推广vue3和vue2组件之间传参的不同
script setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
script setup 中的代码会在每次组件实例被创建的时候执行。
任何在 script setup 声明的顶层的绑定 (包括变量#xff0c;函数声明#xff0…vue3和vue2组件之间传参的不同
script setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
script setup 中的代码会在每次组件实例被创建的时候执行。
任何在 script setup 声明的顶层的绑定 (包括变量函数声明以及 import 导入的内容) 都能在模板中直接使用使用双花括号{{自定义的声明}}。
在 script setup 中要使用动态组件的时候应该使用动态的 :is 来绑定结合三元运算符。
效果展示 一、defineProps父传子
理论知识 父组件通过 :传参名“传递的数据” 向子组件传递参数 子组件通过 defineProps{接收的数据}() 来接收数据 在 script setup 中引入的组件会自动注册所以可以直接使用无需再通过components进行注册。 代码
父组件
div classprojects实际已维修项目/div
AllTable:widthIndex100:AllTableDatadata.AllTableData:tableColumnsdata.tableColumns:heightsdata.heights:optiontruechangeTbaleDatachangeTbaleData
/AllTable
div classisNewOpenDel-buttontypeprimaryplainclassmt-4stylewidth: 100%clickhandleNew维修项目新增/el-button
/div script setup
const changeTbaleData (value) {data.AllTableData value;
};
const data reactive({AllTableData:[],})
/script
二、defineEmits子传父
在Vue 3中可以使用 defineEmits 函数来声明子组件可以触发的事件。该函数需要在子组件中使用并且需要在 setup 函数中调用 。
理论知识 父组件通过绑定子组件注册好的事件名在父组件中进行处理子组件传过来的value 子组件通过两点 1.defineEmits()函数用来声明子组件可以触发的事件 语法const 事件名 difineEmits([事件]) 2.在事件方法内部使用注册好的事件向父组件传参 语法声明的事件名(事件传递的数据) 理论知识代码 子组件
//封装组件AllTable.vue
templateel-table :dataprops.AllTableData :heightprops.heights stylewidth: 100%:cell-style{ textAlign: center } :header-cell-style{ text-align: center }el-table-column typeindex label序号 :widthprops.widthIndex /template v-for(item, index) in props.tableColumns :keyindexel-table-column :propitem.value :labelitem.name width :show-overflow-tooltiptrue/el-table-column/template
el-table-column label操作 v-ifprops.optiontemplate #defaultscopeel-popconfirm title你确定要删除吗? confirm-button-text确认 cancel-button-text取消confirmconfirmOption(scope.$index) cancelcancelOption(scope.$index)template #referenceel-button link typedanger sizesmall删除/el-button/template/el-popconfirm/template/el-table-column/el-table
/template
script setup
const emits defineEmits([changeTbaleData])
const props defineProps({widthIndex: {type: Number,default: 180},AllTableData: Object,tableColumns: Object,heights: String,option: {type:Boolean,default:false},
})
const confirmOption (index) {props.AllTableData.splice(index, 1)emits(changeTbaleData, props.AllTableData)
}
const cancelOption (index) {ElMessage({message: 取消。,type: warning,})
}
/script
写到这儿在vue开发中常用的组件之间就上面两种方式。
但当情景不止是父——子 之间通讯可以考虑inject注入、defineExpose()暴露、pinia(或vuex) 三、defineExpose 获取子组件的实例和内部属性
子组件将方法、变量暴露给父组件使用父组件才可通过 ref API拿到子组件暴露的数据。
效果展示 参考链接defineexpose的使用 在vue2中通常会在子组件便签上加ref来获取子组件的实例和属性方法在 Vue3的script-setup 模式下所有数据只是默认 return 给 template 使用不会暴露到组件外所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。 如果要调用子组件的数据需要先在子组件显示的暴露出来才能够正确的拿到defineExpose可以实现 1.父组件通过ref中访问子组件的方法、变量 2.子组件中子组件的方法、变量需要通过defineExpose暴露出去 代码
SelectMaterial refselectMaterial/SelectMaterial
const selectMaterial ref();
const selectSystemMaterial () {//打开弹框selectMaterial.value.Open(true);
};
弹框组件
//弹框组件封装!-- 打开新增弹框 --MaintainTableDialogv-model:modelValuedata.isOpenDialog //备注弹框打开与否:footerdata.dialogTitle ! 查看 ? data.isShowFooter : true:title维修项目新增:dialogWidth50%template #defaultel-tablerefmultipleTableRef:datadata.mytableData //备注弹框表格的数据stylewidth: 100%height50vh:row-keybindRowKeysel-table-columntypeselectionwidth55:reserve-selectiontrue/el-table-columnel-table-column typeindex label序号 width70 /el-table-column propclassifyName label设备分类 width170 /el-table-columnpropnolabel项目编号width160:show-overflow-tooltiptrue/el-table-columnpropnamelabel项目名称width190:show-overflow-tooltiptrue/el-table-column propperiod label周期 width100 /el-table-column propmanager label负责人 width100 //el-table/templatetemplate #footerdiv classfooter-btnel-buttontypeprimaryclickclickNewDialog:loadingdata.isLoadingclasssubmit确认/el-buttonel-button clickdata.isOpenDialog false取消/el-button/div/template/MaintainTableDialog
script setup
const Open (isAdd) {data.isOpenDialog isAdd || true;data.mytableData store.selectMaterilReqList;
};
//父组件中访问子组件的方法或者变量需要通过defineExpose暴露出去
defineExpose({Open,
});
/script
写到这儿以上就是difineExpose()的用法 。
以下是调取接口——数据回显——选中数据传参可选看 代码(打开弹框调取接口——数据回显)
const handleNew () {data.isOpenDialog !data.isOpenDialog;const params {shipGuid: data.ruleForm.shipGuid,category: 2,};console.log(data.AllTableData)api.getMaintainItems.post(params).then((res) {// data.mytableData res.data.data;//提示首先打开弹框把“多选”勾选的数据置空因为在之后会赋值选中的效果multipleTableRef.value.clearSelection();let itemGuidLists[]data.AllTableData.forEach(item{itemGuidLists.push(item.itemGuid)})console.log(itemGuidLists)data.mytableDatares.data.data.filter(item{if(itemGuidLists.indexOf(item.itemGuid)0){//备注只显示未勾选的。只显示未选择的return true }else{return false}})// data.AllTableData.forEach((row) {// data.mytableData.map((item) {// if (row.itemGuid item.itemGuid) {//备注显示所有并勾选计划内选中的。显示有选中和未选择的//!!!提示设为true多选框选中// multipleTableRef.value.toggleRowSelection(item, true);// }// });// });});
};
代码(选中传数据):
el-buttontypeprimaryclickclickNewDialog:loadingdata.isLoadingclasssubmit
确认
/el-button
script setup
const clickNewDialog (val) {data.isOpenDialog false;//关闭子弹框const selectData multipleTableRef.value.getSelectionRows();//获取多选选中的项//比较子弹框传的 和 父列表展示的 不存在添加到父列表const guidData data.AllTableData.map((item) {return item.itemGuid;});selectData.map((item) {// [].indexof() -1 不存在if (guidData.indexOf(item.itemGuid) 0) {data.AllTableData.push(item);}});
};
/script 四、inject注入式父子组件传参
父组件可以向子组件无论层级注入依赖每个子组件都可以获得这个依赖无论层级。
参考链接依赖注入 代码
//父组件
script setup
import { ref, provide } from vue
import { fooSymbol } from ./injectionSymbols
provide(foo, bar)// 提供静态值
const count ref(0)// 提供响应式的值
provide(count, count)
provide(fooSymbol, count)// 提供时将 Symbol 作为 key
provide(parentData, data.msg);// 提供默认值const data reactive({msg: 我是父组件的数据,
})
/script
//子组件
script setup
import { inject } from vue
import { fooSymbol } from ./injectionSymbols// 注入不含默认值的静态值
const api inject(parentData)
// 注入响应式的值
const count inject(count)
// 通过 Symbol 类型的 key 注入
const foo2 inject(fooSymbol)
// 注入一个值若为空则使用提供的默认值
const bar inject(foo, default value)
// 注入一个值若为空则使用提供的函数类型的默认值
const fn inject(function, () {})/script
templatetemplatep我是子组件/ppparent组件数据{{api.parentData}}/ppparent组件数据{{parentData}}/p
/template
写到这儿以上就是注入依赖的用法。
实际代码可选看 在项目里用到最多的是 1、封装的axios,用于发起网络请求 2、封装的echart用于调用原生的ecahrt 在整个项目的main.js文件
provide()提供一个值可以被后代组件注入。
//main.js
import * as api from ./api/index
import * as echarts from echarts
import App from ./App.vue
const app createApp(App);
//演示
app.provide($api, api);
app.provide($echarts, echarts);
app.mount(#app)
inject()注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
//任何一个vue页面组件
script setupconst api inject($api);//...调取接口api.某某const _echarts inject($echarts);myCharts _echarts.init(myChart.value,{width:100%,height:100%,},{renderer: svg,});window.addEventListener(resize, function () {myCharts myCharts.resize();});
/script
