Vue组件props更新无响应：CodeSnippet不随语言切换变化

开发「Show Code」功能时遇到异常：根据用户在CodeHeader组件中选择的语言，向CodeSnippet组件传递不同props，基础交互逻辑正常，页面中{{ selectedLanguage }}和{{ getCodeForLanguage(selectedLanguage) }}均能正常更新显示，但CodeSnippet组件的内容始终无变化。

ShowCode 组件代码 #

<template>
    <div>
        <CodeHeader @language-selected="onLanguageSelected" />
        <CodeSnippet :language="selectedLanguage" :code="getCodeForLanguage(selectedLanguage)" />
        {{ selectedLanguage }} // WORKS
        {{ getCodeForLanguage(selectedLanguage)}} //WORKS

    </div>
</template>
            
<script>
import CodeSnippet from '@/components/atoms/CodeSnippet.vue';
import CodeHeader from '@/components/cells/CodeHeader.vue';

export default {
    name: 'ShowCode',
    components: {
        CodeSnippet,
        CodeHeader
    },
    data() {
        return {
            selectedLanguage: 'html', 
        };
    },
    methods: {
        onLanguageSelected(language) {
            language = language.toLowerCase();
            this.selectedLanguage = language;
        },
        getCodeForLanguage(language) {
            switch (language) {
                case 'html':
                    return '<h1>Oi</h1>';
                case 'css':
                    return '.h1 {}';
                case 'js':
                    return 'console.log(h1);';
                default:
                    return '';
            }
        },
    },
};
</script>

CodeSnippet 组件代码 #

<template>
    <div class="code-snippet">
      <pre>
        <vue-prism-component :code="code" :language="language"> {{ code }} {{ language }}</vue-prism-component>
      </pre>
    </div>
  </template>
  
  <script>
  import VuePrismComponent from 'vue-prism-component';
  import 'prismjs/themes/prism.css';
  
  export default {
    name: 'CodeSnippet',
    components: {
      VuePrismComponent
    },
    props: {
      code: {
        type: String,
            default: 
            `<h1>Oops! No code found.</h1>
 <p>Sad :(</p>`
            
      },
      language: {
        type: String,
            default: 'html'
      }
    }
  };
  </script>

问题根源在于vue-prism-component的使用逻辑：

1. 同时传递:code props和插槽内容会导致渲染冲突，插槽内容会覆盖props传递的代码，且不会随props更新。
2. vue-prism-component初始化后不会自动监听props变化，触发重新高亮渲染。

修改后的 CodeSnippet 组件 #

<template>
    <div class="code-snippet">
      <pre>
        <vue-prism-component 
          :code="code" 
          :language="language"
          :key="`${language}-${code}`"
        ></vue-prism-component>
      </pre>
    </div>
  </template>
  
  <script>
  import VuePrismComponent from 'vue-prism-component';
  import 'prismjs/themes/prism.css';
  
  export default {
    name: 'CodeSnippet',
    components: {
      VuePrismComponent
    },
    props: {
      code: {
        type: String,
        default: 
        `<h1>Oops! No code found.</h1>
 <p>Sad :(</p>`
            
      },
      language: {
        type: String,
        default: 'html'
      }
    }
  };
  </script>

关键修改说明 #

• 移除插槽内容：删除vue-prism-component标签内的{{ code }} {{ language }}，让组件完全依赖:code和:language props渲染，避免内容冲突。
• 添加:key属性：通过:key="${language}-${code}"绑定语言与代码的组合值，每当语言或代码变化时，Vue会销毁旧组件并创建新实例，强制vue-prism-component重新执行高亮逻辑，从而更新显示内容。

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