vue 中绑定 setup 数据有三种方法：1. refs：使用 ref 属性将元素引用绑定到 setup 变量；2. v-model：双向绑定输入元素值和 setup 变量；3. 自定义属性：创建属性并绑定到 setup 变量，访问值使用 this.attributename。
Vue 中绑定 Setup 数据
在 Vue 中，使用 setup() 函数定义逻辑和组件状态。为了将这些数据绑定到组件模板，可以使用以下方法：
1. refs
- 使用
ref属性将元素或组件引用绑定到 setup 中的变量。 - 访问绑定的元素或组件，使用
this.$refs.<ref-name></ref-name>。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="vue"><template>
<input ref="myInput" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const inputRef = ref(null);
return { inputRef };
},
mounted() {
console.log(this.$refs.myInput.value);
}
};
</script></code>2. v-model
YXPHP企业网站管理系统4.0
下载
支持静态模板,支持动态模板标签,支持图片.SWF.FLV系列广告标签.支持百万级海量数据,绑定内置URL伪装策略(URL后缀名随你怎么写)，绑定内置系统升级策略(暂不开放升级),绑定内置模板付费升级策略(暂不开放更新)。支持标签容错处理,绑定内置攻击防御策略,绑定内置服务器优化策略(系统内存释放的干干净净)。支持离线运行,支持次目录,兼容U主机。支持会员功能,支持文章版块权限阅读,支持会员自主注册
- 使用
v-model指令绑定输入元素值到 setup 中的变量。 -
v-model将双向绑定输入值和数据变量。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="vue"><template>
<input v-model="inputText" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const inputText = ref('');
return { inputText };
}
};
</script></code>3. 自定义属性
- 创建自定义属性并将其绑定到 setup 中的变量。
- 访问绑定的值，使用
this.attributeName。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="vue"><template>
<div :my-value="myValue"></div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const myValue = ref('');
return { myValue };
}
};
</script></code><code>console.log(this.myValue); // 输出从setup绑定的值</code>
