初次使用vue感觉还是有点凌乱…
<body>
<div id='box'>
<div :style='{fontSize:fontsize +"px"}'>我是父组件的内容</div>
<div :style='{fontSize:fontsize +"px"}'>将调用handle方法放大字体</div>
<!-- 这里的内联style样式在绑定后采用驼峰命名法，否则没有样式，记得加单位 -->
<child-com :cattr='fruit' @font-size='handle($event)'></child-com>
<!-- 通过$event接收传过来的值 -->
<!-- 这时@font-size接收子组件中的@click方法 -->
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('child-com', {
data: function() {
return {
}
},
props: ['cattr'],
template: `
<div>
<!--<button @click='$emit("font-size")'>放大字体</button>-->
<!--一个传参数、一个不传参数会出错，未传参数的显示未定义-->
<button @click='$emit("font-size",5)'>放大5px字体</button>
<button @click='$emit("font-size",10)'>放大10px字体</button>
<!--这里可以传值$emit("font-size",5)-->
</div>
`
// 子组件中用$emit方法绑定一个事件
//<div></div>
//<button @click='$emit("font-size")'>放大字体</button>
//以上模板是错误的，会报错
//！！！注意只能包含一个同级元素，包在一个容器中
});
new Vue({
el: '#box',
data: {
fontsize: 10
},
methods: {
//handle对应子组件中的点击事件
handle: function(val) {
//val是$event传过来的参数
//对应data中的fontsize
this.fontsize += parseInt(val);
}
},
})
</script>
</body>
1876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
