Vuejs组件道具为字符串

2 回答

• 17

  现在，Vue试图找到一个名为 pictures 的变量作为属性值传递给子组件 .

  如果要在该内联表达式中指定字符串值，可以将值包装在引号中以使其成为字符串：

  <list-view :avatar="'pictures'"></list-view>
  

  ---

  或者，正如@Zunnii在下面回答的那样，如果传递的值实际上只是一个静态字符串，您可以简单地省略 v-bind 冒号：

  <list-view avatar="pictures"></list-view>
  

  这样，子组件的 avatar prop将被赋予字符串值 "pictures" .

  回复于 2024-04-28T19:23:11+08:00
• 7

  如果你真的想传递静态字符串，你可以直接传递字符串而不需要v-bind

  <div id="app">
     <greeting text="world"></greeting>
  </div>
  

  然后在JS文件中

  Vue.component('greeting', {
      props: ['text'],
    template: '<h1>Hello {{ text  }}!</h1>'
  });
  
  
  var vm = new Vue({
    el: '#app'
  });
  

  JSFiddle => https://jsfiddle.net/dpLp4jk8/

  回复于 2024-04-28T19:23:11+08:00