App.vue 中写入
<template> <div class="hello"> <h3>我是 App 父组件</h3> <h4>访问自己的数据：{{msg}},{{name}},{{user.id}}</h4> <hr> <!-- 1. 在调用子组件时，绑定想要获取的父组件中的数据 --> <Hello :message="msg" :name="name" :user="user"></Hello> </div></template><script>// 引入 Hello 组件import Hello from './assets/components/Hello.vue'export default { data(){ return { msg:'父组件', name:'tom', age:'22', user:{ id:1234, userName:'Jack' } } }, // 注册 Hello 组件 components:{ Hello }}</script>Hello.vue 文件中写入
<template> <div class="hello"> <h3>我是 hello 子组件</h3> <!-- 在页面中直接渲染即可 --> <h4>访问父组件中的数据： {{message}},{{name}},{{user.id}}</h4> </div></template><script>export default { // 2. 在子组件内部，使用 props 选项声明获取的数据，即接收来自父组件中的数据 props:['message','name','user']}</script>注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。