1 <div id="app">
2 <second-child title="父组件的数据" v-bind:msg="msg"></second-child>
3 </div>
1 <script src="./js/vue.global.js"></script>
2 <script>
3 const app = Vue.createApp({
4 data(){
5 return {
6 msg:'hello'
7 }
8 }
9 })
10
11
12 const SecondChild = {
13 data(){
14 return {
15
16 }
17 },
18 template:`
19 <p>第二个子组件 === {{title}} === {{msg}}</p>
20 `,
21 props:['title', 'msg']
22 }
23
24 const ThreeChild = {
25 data(){
26 return {
27
28 }
29 },
30 template:`
31 <p>最后一个个子组件 === </p>
32 <SecondChild></SecondChild>
33 `
34 }
35
36
37 app.component('SecondChild', SecondChild)
38 app.component('ThreeChild', ThreeChild)
39
40 app.mount('#app')
41
42
43 </script>
