老师，写到这一步报错了，帮我找下哪里有问题

来源：1-2 组件的定义及复用性，局部组件和全局组件（2）

头too

2022-08-05 10:39:13

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件嵌套练习</title>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="root">
       
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止vue在启动时生成提示

        // 组件嵌套从底下往上写


           
        // 1-1定义足球社成员组件
        const FMember = {
            template:`
            <div>
                <h2>足球社成员是{{name}}</h2>
            </div>
                `,
            data() {
                return {
                    name:[
                        '张三','李四'
                    ]
                }
            },

        };
        // 1-2 定义健身社成员组件
        const FitMember = {
            template:`
            <div>
                <h2>健身社成员是{{name}}</h2>
            </div>`,
            data() {
                return {
                    name:[
                        'Felix'
                    ]
                }
            }
        };
        // 1-2 定义跑步社成员组件
        const RunMember = {
            template:`
            <div>
                <h2>跑步社成员是{{name}}</h2>
            </div>`,
            data() {
                return {
                    name:[
                        '老鼠','牛','老虎'
                    ]
                }
            }
        };

        // 1-3 定义各个社团组件
        const organization ={
            template:`
                <div>
                    <h2>我们的社团有{{name}}，分别如下</h2>
                    
                        <FMember></FMember>
                        <FitMember></FitMember>
                        <RunMember></RunMember>
                    
                </div>  
            `,
            data() {
                return {
                    name :[
                        '足球社','健身社','跑步社'
                    ]
                }
            },
            components:{
                FMember,
                FitMember,
                RunMember
            }
        };

        //1-4定义app组件
        const app = {
            template:`
            <div>
            <organization></organization>
            </div>
            `,
           
            components:{
                organization
            }
        };

        // 2注册组件
        new Vue({
            el:'#root',
            components:app
        });

       
    </script>
</body>

</html>

写回答

1回答