您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
子组件向父组件通信
发布时间：2020-02-09 17:43:26编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
</style>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var Vcontent = {
template:`
<div class='content'>我是内容组件
<!--调用子组件自身的changeFontSize方法-->
<button @click="changeFontSize">改变父组件的样式</button>
</div>
`,
methods:{
changeFontSize:function(){
//子组件自身的changeFontSize方法触发其父组件为他绑定的属于父组件的change方法
this.$emit("change");
}
}
}
var Vaside = {
template:`<div class='aside'>我是侧边栏组件</div>`
};
var Vheader = {
template:`<div class='head'>我是头部组件</div>`
};
var App={
//此处:style中的语法有点怪异
template:`<div class='main' :style='{fontSize:postFontSize+"em"}'>
<Vheader />
<div class = 'main2'>
<Vaside />
<!--父组件为指定子组件绑定了change方法并且指定其被触发时就触发父组件的changeFontSizeTop方法-->
<Vcontent @change="changeFontSizeTop"/>
</div>
</div>`,
data(){
return {
postFontSize:1
}
},
methods:{
changeFontSizeTop:function(){
this.postFontSize++;
}
},
components:{Vheader,Vaside,Vcontent}
}
new Vue({
el:'#app',
template:'<App></App>',
data(){
return {}
},
components:{App}
});
</script>
</body>
</html>
关键字词：vue,组件,通信
上一篇：父组件向子组件通信
下一篇：全局组件与插槽(slot)