侧边栏壁纸
博主头像
云之彼端博主等级

行动起来,活在当下

  • 累计撰写 27 篇文章
  • 累计创建 6 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录

vue问题记录

Administrator
2023-01-11 / 0 评论 / 0 点赞 / 85 阅读 / 1680 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-12-26,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

记录日常的一些vue3使用过程中的问题

vue2

在自定义组件中使用v-model

v-model是一个语法糖,当使用在组件上时,会被渲染成:

<custom :value="value" @input="()=>{value = $event.target.value}"></custom>

其中props value 和 event input是v-model的默认参数设置
可以在子组件中声明model对象改变默认配置,例如:

export default{
	model:{
    	prop: 'customValue',
        event: 'customEvent'
    }
}

vue3

在对象中使用响应式变量

<script setup>
import { ref,computed } from 'vue'
import {useTest} from "./test.js"
  const a = ref(0)

  const opt =  ref({b:a})
  const opt2 =  ref({
      b:a.value
  })
  const opt3 =  computed(()=>{
    return {b:a.value}
  }) 
  a.value = 3; 
</script>

<template>
  <p>
    {{opt}}  //显示 {b:3}
  </p>
  <p>
    {{opt2}} //显示 {b:0}
  </p>
    <p>
    {{opt3}} //显示 {b:3}
  </p>
</template>

如果使用.value的形式进行赋值,那么在 ref 更新时不会触发副作用更新,需要使用computed计算属性进行依赖收集实现响应式。

0

评论区