组件
组件是可复用的 Vue 实例,且带有一个名字。 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。
1.局部组件的创建
<div id="app">
<Child></Child> //局部组件的使用
</div>
<script>
//局部组件的声明
var Child = {
template: '<p>This is a component</p>'
};
var vm = new Vue({
el: '#app',
components: { //局部组件的挂载
//Child : Child
Child //简写
}
});
</script>
2.全局组件的创建
第一个参数为组件的名字,第二个参数为options
Vue.component("Vbtn",{
template : `
<button>按钮</button>
`,
})
组件传值
1.通过props往子组件传值
- 先给父组件中绑定自定义的属性
- 在子组件中使用props接收父组件传递的数据
- 在子组件中就可以任意使用了
<script>
Vue.component("Parent",{
data(){
return{
msg : "我是父组件的数据"
}
},
template : `
<div>
<p>我是父组件-----{{msg}}</p>
<Child :childData='msg'/> //第一步
</div>
`,
})
Vue.component("Child",{
template : `
<div>
<p>我是子组件</p>
<p>我正在使用父组件的数据 --- {{childData}}</p> //第三步
</div>
`,
props : ["childData"] //第二步
})
new Vue({
el: '#app',
data: function(){
return {
}
},
template : `
<Parent />
`
})
</script>
2.通过事件往父组件传值
- 在父组件绑定自定义事件
- 在子组件中触发原生的事件,在函数中使用$emit触发自定义的事件
<script>
Vue.component("Parent",{
data(){
return{
msg : "我是父组件的数据"
}
},
template : `
<div>
<p>我是父组件</p>
<Child :childData='msg' @childHandler='childHandler'/> //第一步
</div>
`,
methods : {
childHandler(val){
console.log(val);
}
}
})
Vue.component("Child",{
template : `
<div>
<p>我是子组件</p>
<input type="text" v-model="childData" @input='changeValue(childData)'/> //第二步
</div>
`,
props : ["childData"],
methods : {
changeValue(val){
//$emit方法第一个参数为自定义事件名,第二个参数为传递的消息
this.$emit('childHandler',val)
}
}
})
new Vue({
el: '#app',
data: function(){
return {
}
},
template : `
<Parent />
`
})
</script>