vue3 toRefs,vue $refs的用法
这篇文章主要介绍了浅谈vue2的$参考文献在vue3组合式应用程序接口中的替代方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
如果你有过vue2的项目开发经验，那么对$参考文献就很熟悉了。由于vue3的断崖式的升级，在vue3中如何使用$参考文献呢？想必有遇到过类似的问题，我也有一样的疑惑。通过搜索引擎和github，基本掌握如何使用$参考文献。在vue3中使用组合式应用程序接口的函数裁判员来代替静态或者动态超文本标记语言元素的应用。
最近业余在学习vue3项目《蜡笔（Crayon）管理模板：Vue3 + Vuex4 + Ant Design2》 开发，这两天迭代推进了一点，实现了图表图表组件，写文章的时候发现提交代码的犯罪有错别字。
在vue3中使用组合式应用程序接口的设置()方法的时候，无法正常使用这个。$参考文献，但可以使用新的函数ref()。
下面代码摘自：https://github。com/quintion Tang/crayon/blob/feat-dashboard/src/qtui/components/chart。某视频剪辑软件
模板
画布ref= ref chart :height= set height /canvas
/模板
脚本
从“vue”导入{ defineComponent，onMounted，ref，inject，watch }。
从" chart.js "导入图表；
从" @/助手/索引"导入{深层副本}；
导出默认定义组件({
名称： QtChart ，
道具：{
类型：{
类型：字符串，
必填：真，
默认值："行",
},
数据：{
类型：对象，
必填：真，
默认：()=({}),
},
选项：{
类型：对象，
默认：()=({}),
},
高度：{
类型：数量，
默认值：0,
},
refKey: {
类型：字符串，
默认值：null，
},
},
设置（道具){
const ref chart=ref()；
//初始化方法
const init=()={
const canvasChart=ref图表。价值？获取上下文(“2d”)；
const chartHelper=新图表(加拿大海图，{
类型：props.type，
数据：deepCopy(props.data)，
选项：props.options，
});
手表（道具，()={
图表助手。数据=深度复制(道具。数据)；
图表助手。选项=道具。选项；
图表助手。update()；
});
//附加一个实例给参考图表
参考图表。价值。实例=图表助手；
};
//设置高度
常量设置高度=()={
返回{
高度：道具。高度，
};
};
//绑定一个实例，使用注射注入
const bindInstance=()={
if (props.refKey) {
const bind=inject(` bind[$ { props。ref key }]`)；
如果（绑定){
绑定(参考图表。值)；
}
}
};
onMounted(()={
绑定实例()；
init()；
});
返回{
参考图表，
setHeight，
};
},
});
/脚本
这段代码完整的实现了一个图表组件图表，其中自定义了属性道具，通过把参数传递给设置方法来使用其属性值。超文本标记语言中定义一个ref=refChart 来作为图表的数字正射影像图对象，在设置方法中通过方法裁判员方法来定义响应式可变对象，并在设置函数结尾作为返回值。
const ref chart=ref()；
需要注意的是，返回值的属性名必须和超文本标记语言中的裁判员值一致。
下面代码是可以正常执行的。
模板
画布ref= ref chart :height= set height /canvas
/模板
脚本
从“vue”导入{ defineComponent，onMounted，ref，inject，watch }。
从" chart.js "导入图表；
从" @/助手/索引"导入{深层副本}；
导出默认定义组件({
名称： QtChart ，
道具：{
//.
},
设置(道具){
const refChartBox=ref()；
//.
返回{
refChart:refChartBox，
};
},
});
/脚本
在以下情况下，会出现程序错误，达不到预期效果。html中定义的ref=refChart 和安装程序返回的refChartBox不一致。
模板
canvas ref= ref chart :height= set height /canvas
/模板
脚本
从“vue”导入{ defineComponent，onMounted，ref，inject，watch }；
从“chart.js”导入图表；
从“@/helper/index”导入{ deep copy }；
导出默认定义组件({
名称： QtChart ，
道具：{
//.
},
设置(道具){
const refChartBox=ref()；
//.
返回{
refChartBox，
};
},
});
/脚本
结论
本文只是简单介绍一下ref方法的使用，正好在项目中用到。后续会边学习边继续推进项目，做好笔记。
关于vue3组合API中vue2的$refs的替代方法的文章到此为止。关于vue3组合API的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。