处理vue3 组合式API setup emit(‘update:modelValue‘) 无效的问题

或许丶

已于 2022-04-11 14:12:37 修改

阅读量1w

点赞数 3

分类专栏： vue3.0 文章标签： vue

于 2021-04-19 14:31:15 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36189935/article/details/115864136

版权

vue3.0 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Vue编写的可折叠菜单组件实现方法。通过定义一个布尔型属性collapsed来控制菜单的展开与折叠状态，并利用v-model进行双向绑定。文章展示了如何在子组件中通过触发点击事件来切换菜单状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 子组件
export default defineComponent({
  props: {
    collapsed: {
      type: Boolean,
    },
  },
  components: { MenuFoldOutlined, MenuUnfoldOutlined },
  setup(props, { emit }) {
    const store = useStore();
    
    // 必须用computed包装一层而且需设置get和set
    const collapsed = computed({
      get: () => props.collapsed,
      set: (value) => emit("update:collapsed", value),
    });
    const triggerClick = () => {
      // 直接改变值
      collapsed.value = !collapsed.value;
    };
    return {
      triggerClick,
      collapsed,
    };
  },
});

// 父组件
<parent-component v-model:collapsed="collapsed"></parent-component>