这种情形该怎么处理？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1078 天前的主题，其中的信息可能已经有所发展或是发生改变。

child.vue

<template>
  <div class="child">
    <h4>这里是子组件</h4>
    <el-input v-model="data"></el-input>
    <el-button type="primary" @click="onClick">add</el-button>
    <!-- <grand-child></grand-child> -->
  </div>
</template>
<script>

export default {
  name: 'Child',
  props: {
  // 1 、用 v-model 绑定
    value: {
      type: [String, Number]
    }
  },
  data() {
    return {
      data: ''
    };
  },
  watch: {
  // 2 、监听 value 的变化，并做一些处理
    value: {
      handler(val) {
        console.log(val);
        this.data = val + 'parent';
      },
      immediate: true
    }
  },
  methods: {
    onClick() {
      this.data += 'child';
      // 3 、更新值
      this.$emit('input', this.data);
    }
  }
};
</script>

parent.vue

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child v-model="data"> </child>
  </div>
</template>
<script>
import Child from '@/views/Child';

export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      data: '888'
    };
  }
};
</script>

就是子组件要监听父组件传过来的 prop ，并做一些操作（步骤 2 ）。当子组件更新值的时候（步骤 3 ），又会再次触发 watcher 且又执行一次步骤 2 ，此时我并不想再触发步骤 2 的操作，除了加一个类似锁的变量之外还有什么别的办法吗？谢谢。

9 条回复 • 2021-12-02 14:19:39 +08:00

66beta

2021-12-02 10:05:40 +08:00

意思是 prop 只取一次吧？

data() {
return {
data: this.value + 'parent',
};
},

删除 watcher

fengxianqi

2021-12-02 10:11:25 +08:00

@66beta 对的，不过要补充一下。
如果父组件的数据是异步返回时，子组件在 data 里面取到的值往往是初始值。所以这种写法还得确保父组件数据返回后再渲染子组件，如父组件这样写 `<Child :key="data.id" v-model="data.value"></Child>`，data 表示父组件中异步返回的数据，key 变化后可以让子组件重新渲染从而实现父组件数据返回后才渲染的写法