component_props_v-bind_and_plain_text

by edith_tang

HTML

<div id="app">
<!--
  这里给子组件传递[1,2,3]是一个字符串，而不是数组，所以这里会渲染字符串的长度，也就是7
-->
<my-component message="[1,2,3]"></my-component>
<!--
  用v-bind后，传递就是一个数组，所以这里会渲染数组的长度，也就是3
-->
<my-component :message="[1, 2, 3]"></my-component>

<my-component2 :msg = "msg"></my-component2>
</div>

JavaScript

Vue.component('my-component', {
	template: '<div> {{ message.length }}',
  props: ['message']
})

Vue.component('my-component2', {
	template: '<div> {{ msg.length }}',
  props: ['msg']
})

var app = new Vue({
	el: '#app',
  data: {
  	msg: [1, 2, 3, 4]
  }
})