实例化Vue扩展组件时如何修改基组件的data值？

你的问题核心是Vue组件的内部data无法直接通过父组件的属性绑定修改，必须通过props来实现外部传值。下面提供两种可行方案：

方案一：将Block的data改为props（推荐） #

直接把Block里的内部状态data定义为props，这样父组件可以直接传递值，ToggleBlock继承后自动拥有这个props：

修改Block组件代码：

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  // 定义props接收外部传入的值
  props: {
    data: {
      type: String,
      default: "hello" // 设置默认值，保持原有默认行为
    }
  },
  data() {
    return {
      comment: null
    }
  }
});
</script>

<template>
  <h1>{{ data }}</h1>
</template>

然后在其他模板中实例化ToggleBlock时，直接用:data传递值即可：

<ToggleBlock :data="blocks_data.new_data"></ToggleBlock>

方案二：保留Block内部data，通过props传递初始值 #

如果不想修改Block的data定义，可新增一个props用于传递初始值，再用它初始化内部data：

修改Block组件代码：

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    initialData: {
      type: String,
      default: "hello" // 默认值仍为原"hello"
    }
  },
  data() {
    return {
      // 用props的值初始化内部data
      data: this.initialData,
      comment: null
    }
  }
});
</script>

<template>
  <h1>{{ data }}</h1>
</template>

实例化ToggleBlock时，传递initial-data（Vue会自动转换为驼峰式initialData）：

<ToggleBlock :initial-data="blocks_data.new_data"></ToggleBlock>

额外修正：ToggleBlock的模板语法错误 #

你的ToggleBlock模板里的<input>标签未闭合，需要补上/>：

<template>
  <div>
    <span>
      <h1>{{ data }}</h1>
      <input type="checkbox" id="checkbox" v-model="toggled" />
    </span>
  </div>
</template>

内容的提问来源于stack exchange，提问作者sam_s3piol