component_prop_1WayStreaming

by edith_tang

HTML

<div id="app">
<my-component :init-count="1"></my-component>
<oth-component :width="100"></oth-component>
</div>

CSS

div {
  background-color: #ccc;
}

JavaScript

/* 将接收到的prop作为初始数据保存到组件自身的数据中，后面只要操作数据即可，而不需要操作prop */
Vue.component('my-component', {
	template: '<div> {{ count }}</div>',
  props: ['initCount'],
  data: function() {
  	return {
    	count: this.initCount
    }
  }
})

/* 将接收到的prop的值保存到一个计算属性中 */
Vue.component('oth-component', {
	template: '<div :style="style">组件内容</div>',
  props: ['width'],
  computed: {
  	style: function() {
    	return {
      	width: this.width + 'px'
			}
    }
  }
})

var app = new Vue({
	el: '#app'
})