关于Toast组件message反复传递的问题
来源：3-7 通过代码拆分增加逻辑可维护性
hwjhuvbj
2021-11-04 16:17:29
问题描述：
课程中的message属性，可以只在Toast.vue组件中自行维护吗，不用像视频中那样先作为1.showToast()的参数传入Toast.vue；
2.接着在Login.vue 中的useToastEffect()中返回；
3.最后作为自定义组件的属性传回去；
我尝试过将message属性定义在<script>标签中，但是报错了，我的理解是<template>中是可以直接使用响应式对象的，那么用ref()创建的变量应该可以在页面直接使用的吧。
不知道是哪里理解错了，希望老师指教一下。
相关截图：
写回答
1回答
-
好帮手慕慕子
2021-11-04
同学你好，可以直接在Toast.vue组件中维护。Vue语法中规定，只有data中的属性和setup方法中return返回对象中的属性，可以在template模板中使用，像同学截图中的直接声明message这种方式无法在template中使用。示例：
如果是在Toast.vue内部设置message属性值，那么该组件的可复用性就降低了，推荐同学参考视频中老师讲解的思路，在使用Toast组件时传递对应的数据，这样不止在登录页可以使用Toast.vue，也可以在其他页面使用Toast.vue组件，并传入对应的文字内容，这样在不同页面中使用Toast.vue组件，就可以设置不同的文字内容。提高组件的可复用性。
祝学习愉快~
0
相似问题