Vue组件加深

<template>
    <!--//视图-->
    <div>
        你Vue
        {{msg}}
        <p>绑定对象：{{userInfo.username}}---{{userInfo.age}}</p>
        <p>
            {{h2}}
        </p>
        <p><span v-html="h2"></span></p>

    </div>
    <Homes />
    <br />
    <br />
    <keep-alive>
        <User></User>
    </keep-alive>
</template>
<script>
    import Homes from ‘./components/Homes‘;//引入组件
    import User from ‘./components/User‘;//引入组件
    export default {
        data() {
            return {
                msg: "Hello Vue",
                userInfo: {
                    username: "yushuicai",
                    age: "20"
                },
                h2: "<h2>My is one h2 html </h2>"
            };
        
        },
        components: {
            Homes,//注册组件,
            User
        }
    }
</script>

<template>
    <h5>{{title}}</h5>
    <button @click="getTitle">my is Homes components Title</button>
    <Header :title="title" :count="num" :userinfo="userInfo" :home="this"></Header>
</template>
<script>
    import Header from ‘./Header‘;
    export default {
        data() {
            return {
                title: "my is Homes components Title",
                num: 10,
                userInfo: {
                    username: "zhang san",
                    age:20
                }
            }
        },
        methods: {
            getTitle() {
                alert(this.title)
            }
        },
        components: {
            Header
        }
    }
</script>

<template>
    <header>
        my is a top components
        <br />
        <h1>{{title}}</h1>
        <br />
        <br />
        {{count}}
        <br />
        <br />
        {{userinfo.username}}
        <br />
        <br />
        {{home.title}}可以接受Home组件里的所有数据和方法
    </header>
</template>
<script>
    export default {
        props: ["title", "count", "userinfo","home"]//接受Home组件传的值，还可以对数据进行校验
    }
</script>

<template>
    我是一个用户组件
    <ul>
        <li v-for="(item,index) in list " :key="index">
            {{index}}--{{item}}
            <br />

        </li>
    </ul>
    <div id="app" class="tab_info">
        <ul class="tab_header">
            <li class="tab_li" v-for="(item,index) in posts" :key="index" @click="currentIndex=index">
                {{item.title}}
            </li>
        </ul>
        <div class="tab_content">
            <span v-html="content"></span>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                currentIndex: 0,
                list: [],
                posts: [
                    {
                        id: 1,
                        title: ‘Nodejs Text‘,
                        content: ‘<p>Teachers Nodejs 的教程</P>‘
                    },
                    {
                        id: 2,
                        title: ‘Golang Text‘,
                        content: ‘<p>Teachers Golang 的教程</P>‘
                    },
                    {
                        id: 3,
                        title: ‘Ionic5.x Text‘,
                        content: ‘<p>Teachers Ionic5 的教程</P>‘
                    }
                ]
            }
        },
        mounted() {
            for (var i = 0; i < 10; i++) {
                this.list.push(‘my is ${i} top‘)
            }
        },
        computed:{
            content() {
                return this.posts[this.currentIndex].content;
            }
        }
    }
</script>