<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
子组件向父组件传递信息
例:
<button v-on:click='$emit("enlarge-text")'>扩大字体</button>
-->
<div id="app">
<div :style='{"fontSize": fontSize+"px"}'>{{msg}}</div>
<tool :msg="msg" @enlarge-text="handel($event)" ></tool>
</div>
<script src="./vue/vue.js"></script>
<script>
Vue.component("tool",{
props:['msg'],
template:`
<div>
<div>{{msg}}</div>
<button v-on:click='$emit("enlarge-text",5)'>扩大父组件中的字体</button>
</div>
`
});
var vm = new Vue({
el:"#app",
data:{
msg:"hello vue!",
fontSize:10
},
methods:{
handel:function(val){
//扩大字体大小
// console.log($event);
this.fontSize +=val;
}
}
});
</script>
</body>
</html>
网友评论