父子组件通讯 · vue

## props:['arti'] //传递值父子通讯 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <blog-art :arti="art"></blog-art> </div> </body> </html> <script src="vue/vue.js"></script> <script> //------------------------以下为子------------------------------- var art={ template: ` <div> <h1>{{arti.title}}</h1> <p>{{arti.content}}</p> </div> `, props:['arti'] //传递值父子通讯 } //------------------------以下为父------------------------------- var vm=new Vue({ el:'#app', data:{ art:{title:'ariticle title',content:'ariticle title'} }, components:{ 'blog-art':art //注册子组件名字为html标签 } }) </script> ~~~ ![](https://img.kancloud.cn/3d/3a/3d3aebb4986304a0347b5a592380b7b3_1957x1785.png)