8.vue2-组件component

Author: vanessa
Date: 2018/06/19

1.组件

<my-div></my-div>
Vue.component('my-div',{
		template:'<button>按钮</button>',
	})

2.父组件给子组件传递数据props

<my-div title="this is a element"></my-div>
Vue.component('my-div',{
		props:['title'],
		template:'<p>{{title}}</p>',
	})

3.向父级发送消息emit

使用emit提交事件，emit的第一个参数相当于父级需要@后面的值，第二个参数相当于在父组件中通过$event访问

<my-div :style={fontSize:txtFontSize+'em'} title="this is a element" @large-font="txtFontSize+=$event"></my-div></div>
Vue.component('my-div',{
		props:['title'],
		template: `
		    <div>
		       <button @click="$emit('large-font',0.1)">large text</button>
		       <p>{{title}}</p>
		    </div>`,
	})
    new Vue({
		el:'#box',
		data:{
			txtFontSize:1,
        }
    })

4.组件中使用v-model

Vue.component('custom-input',{
		props:['searchText'],
		template:`<div>
			<input type="text" v-bind:value="searchText" @input="$emit('input', $event.target.value)"/></div>
		`
	});
<custom-input v-model="searchText"></custom-input>

ps:searchText如果定义中data中，一开始并没有绑定值，为什么？
答：组件中props中必须是”value“，template中必须是：v-bind:value=’value‘,不能是传递的searchText

5.插槽solt,父向子传递内容，父组件中间的内容被插到子组件solt中

 Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
<alert-box>
  Something bad happened.
</alert-box>