题目

下列代码中，横线处的正确写法是（）。<;div id="example">;<;my-component myMusic="没离开过">;<;/my-component>;<;/div>;<;script type="text/javascript">;var vm = new Vue((el : '#example',components : {'my-component' : {props : ['______'],template : '<;p>;{{______)}<;/p>;'}}})<;/script>;A.A mymusicB.B myMusicC.C my-musicD.D my-Music

下列代码中，横线处的正确写法是（）。<;div id="example">;<;my-component myMusic="没离开过">;<;/my-component>;<;/div>;<;script type="text/javascript">;var vm = new Vue({el : '#example',components : {'my-component' : {props : ['______'],template : '<;p>;{{______}}<;/p>;'}}})<;/script>;
  • A.A mymusic
  • B.B myMusic
  • C.C my-music
  • D.D my-Music

题目解答

答案

A

解析

本题考查Vue.js中组件间属性传递（props）的命名规则。关键点在于理解HTML属性名与Vue组件props的对应关系：

  1. HTML属性名必须为kebab-case（短横线分隔），而Vue组件内部的props通常使用camelCase（驼峰式）。
  2. 当父组件通过<my-component myMusic="...">传递属性时，实际HTML解析时会将myMusic视为mymusic（因HTML对驼峰式属性名不敏感），因此子组件的props需定义为mymusic才能正确接收值。

关键步骤分析

  1. 父组件属性传递：代码中<my-component myMusic="没离开过">的myMusic在HTML中会被视为mymusic（因HTML属性名大小写不敏感且不支持驼峰式）。
  2. 子组件props定义：子组件需通过props声明接收的属性。由于父组件实际传递的是mymusic，因此props中应填写mymusic。
  3. 模板中使用：模板中的{{______}}需与props名称一致，即{{mymusic}}。

选项排除

  • 选项B（myMusic）：若填写myMusic，Vue无法接收到父组件传递的值，因为HTML已将属性名转换为mymusic。
  • 选项C（my-music）：若填写my-music，需父组件使用<my-component my-music="...">，但题目中父组件实际使用的是myMusic。
  • 选项D（my-Music）：格式不符合Vue的命名规范。