您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
父组件向子组件通信
发布时间：2020-02-09 17:41:50编辑：雪饮阅读（）
<!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'>我是内容组件
<ul>
子组件使用接收过来的父组件绑定的posts数据
<li v-for = '(item,index) in posts'>
<h3>{{item.title}}</h3>
<h4>{{item.content}}</h4>
</li>
</ul>
</div>
`,
//子组件接收父组件绑定过来的posts数据
props:['posts']
}
var Vaside = {
template:`<div class='aside'>我是侧边栏组件</div>`
};
var Vheader = {
template:`<div class='head'>我是头部组件</div>`
};
var App={
template:`<div class='main'>
<Vheader />
<div class = 'main2'>
<Vaside />
向指定子组件绑定父组件的posts数据
<Vcontent :posts = 'posts'/>
</div>
</div>`,
data(){
return {
//父组件定义posts数据
posts:[
{id:1,title:"我的第一篇博客",content:'天王该帝王'},
{id:2,title:"我的第二篇博客",content:'小鸡炖蘑菇'},
{id:3,title:"我的第三篇博客",content:'宝塔镇河妖'}
]
}
},
components:{Vheader,Vaside,Vcontent}
}
new Vue({
el:'#app',
template:'<App></App>',
data(){
return {}
},
components:{App}
});
</script>
</body>
</html>
关键字词：vue,组件,通信
上一篇：ES5_6_7学习笔记
下一篇：子组件向父组件通信