vue组件
1. 组件注册
官方强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突
Vue.component('my-component-name', { /* ... */ })
<my-component-name>
全局组件注册
注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
Vue.component('组件名称', {
data:组件数据(必须是一个函数),
template:组件模板内容
});
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
//组件注册
Vue.component('button-counter',{
//组件中需要的数据
data: function () {
return{
count:0
}
},
//组件模板内容
template:"<button @click='handel'>点击了{{count}}次</button>",
methods:{
handel:function () {
this.count+=2;
}
}
});
var vue = new Vue({
el:"#app",
data:{
},
})
</script>
</body>
2. 组件间数据交互
父组件向子组件传值
- 组件内部通过props接收传递过来的值
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
- 父组件通过属性将值传递给子组件
<blog-post post-title="来自父组件的数据!"></blog-post>
<!--也可以是绑定的数据-->
<blog-post :post-title="post"></blog-post>
<div id="app">
<!--直接传值、注意不能用postTitle(Html大小写不敏感)-->
<blog-post post-title="来自父组件的数据"></blog-post>
<!--通过 v-bind 动态赋值-->
<blog-post :post-title="postTitle"></blog-post>
</div>
<script>
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
data:function(){
return{
msg:"子组件本身的数据"
}
},
template: '<h3>{{ postTitle +"----" + msg}}</h3>'
});
var vue =new Vue({
el:"#app",
data:{
postTitle:"postTitle",
},
})
</script>
子组件向父组件传值
- 子组件通过自定义事件向父组件传递信息
Vue.component('menu-text',{
template:`
<button @click="$emit('enlarge-text')">字体变大</button>
`
});
2.父组件监听子组件的事件
<menu-text @enlarge-text="handel"></menu-text>
<div id="app">
<div :style="{fontSize:fontSize+'px'}">字体</div>
<menu-text @enlarge-text="handel"></menu-text>
</div>
<script>
Vue.component('menu-text',{
template:`
<button @click="$emit('enlarge-text')">字体变大</button>
`
});
var vue = new Vue({
el:"#app",
data:{
fontSize:5,
},
methods:{
handel:function () {
this.fontSize+=10;
}
}
})
</script>
浙公网安备 33010602011771号