vue

props

html的属性是大小写不敏感的,所以如果传递的属性是驼峰写法,使用的时候需要用-写法来使用;

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

传递动态或静态Prop

传递字符串是静态传值,

<blog-post likes="this is static string oinfo"></blog-post>

数字和布尔值,数组,对象都属于js表达式,需要使用:

<blog-post v-bind:likes="42"></blog-post>
<blog-post v-bind:likes="true"></blog-post>
<blog-post v-bind:likes="[29,30,40,50]"></blog-post>
<blog-post v-bind:likes="{name:'zhangsan',age:'20'}"></blog-post>
原文地址:https://www.cnblogs.com/xiaofenguo/p/12918053.html