美文网首页
Vue3 父组件异步数据传给子组件,视图未更新

Vue3 父组件异步数据传给子组件,视图未更新

作者: Goorln | 来源:发表于2023-11-14 11:53 被阅读0次

问题描述: 子组件中通过点击事件修改DOM元素中的selected选中项,数组中被选中的数据值更新了,但是视图未更新选中的样式

// 子组件
<view class="option">
   <view
      v-for="(item, index) in options.items"
      :key="index"
      class="item"
      :class="item.current ? 'selected' : ''"
      @tap="onClickItem(index)">
        <view class="item-t">{{ item.name }}</view>
        <view class="price"><text v-if="!options.showImg">¥</text>{{ item.price }}</view>
    </view>
</view>

const emit = defineEmits(['update:options'])
const onClickItem = (index) => {
  props.options.items.forEach((item, i) => {
    if (index === i) {
      item.current = !item.current
    } else {
      item.current = false
    }
  })
emit('update:options',  props.options)
}

// 父组件 
const options= ref({
  desc: '请选择',
  items: [
    { name: '选项一', price: '0.00', current: true },
    { name: '选项二', price: '2.00', current: false },
    { name: '选项三', price: '4.00', current: false },
    { name: '选项四', price: '6.00', current: false },
    { name: '选项五', price: '8.00', current: false },
    { name: '选项六', price: '10.00', current: false },
  ],
  showImg: false,
})
<ChildComponent
  v-model:options="options"
  @update:options="options = $event"
/>

onClickItem点击事件时,options.item里面的current的值更新了,但是视图中selected选中样式并未更新。

这是因为:在子组件中,虽然修改了 props.options 的值,但是 Vue 的 Props | 单向数据流特性
会阻止修改 prop

要让选中的项生效,可以:

  • 不要用 prop 传递 options,直接在子组件中用一个 ref 声明 options
  • 子组件中 emit 一个新选中的索引值,父组件根据这个索引更新自己的 options

这样就可以避免子组件直接修改父组件的状态了。

例如:

// 子组件
const emit = defineEmits(['update:selected'])
const selectedIndex = ref(0)
const onClickItem = (index) => {
  selectedIndex.value = index
  emit('update:selected', index)
  props.options.items.forEach((item, i) => {
    if (index === i) {
      item.current = !item.current
    } else {
      item.current = false
    }
  })
}

// 父组件 
<ChildComponent
  v-model:selected="selectedIndex"
  @update:selected="index => {
    options.items[index].current = true 
    options.items.forEach(item => {
      if(item !== options.items[index]) {
        item.current = false  
      }
    })
  }"
/>

最终效果如图所示:


demo.gif

相关文章

  • Vue组件间的参数传递

    1.父组件与子组件传值父组件传给子组件:子组件通过props方法接受数据;子组件传给父组件:$emit方法传递参数...

  • react父子组件通信

    父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据。

  • React初探

    父组件传给子组件: 父组件直接传给孙子组件:父->子->孙 子组件传给父组件: 组件传参时对参数的验证规则(pro...

  • 2019-01-18 Vue学习

    父组件传数据给子组件(props),子组件传给父组件($emit("触发大的事件”,传的数据)) 插槽(slot)...

  • 关于$emit的用法

    1、父组件可以使用 props 把数据传给子组件。 2、$emit子组件调用父组件的方法并传递数据 示例 父组件 ...

  • react组件传值的几种方式

    react 组件传值一、父组件传给子组件父组件通过props传递给子组件; 二、子组件传给父组件父组件通过prop...

  • 父子组件之间的信息通信

    1.子组件向父组件传递数据 ①向子组件传递number属性,并把父组件传给子组件的number渲染到子组件中。父组...

  • Vue组件通讯

    (1)子访问父组件:props (2)父访问子组件:$emit (3)兄弟组件通信:子1传给父组件,父再传给子2 ...

  • vue2.0 如何把子组件的数据传给父组件?

    在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App. ps:没看父组件传给子组件的先看看...

  • provide inject在vue2和vue3中的使用

    vue2父组件 vue2子组件 vue3父组件 vue3子组件 vue3官方详细使用provide inject地...

网友评论

      本文标题:Vue3 父组件异步数据传给子组件,视图未更新

      本文链接:https://www.haomeiwen.com/subject/varjwdtx.html