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>