App.vue
<template> <div id="app"> <Parent></Parent> </div> </template> <script> import Parent from './components/Parent' export default { name: 'App', components: { Parent } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>components/Parent.vue
<template> <div> <span>我是父组件</span> <Child title="我是父组件传递的title"></Child> </div> </template> <script> import Child from './Child'; export default { components: { Child, }, } </script> <style scoped> </style>components/Child.vue
<template> <div> <hr> <span>我是子组件</span> <br> 这里显示父组件传递的title:{{title}} </div> </template> <script> export default { props:["title"] } </script> <style scoped> </style>效果截图：
