组件基础

组件，一个模板标签就是一个组件，网页可由多个组件组成，每一个组件都有自己的数据源，方法，过滤器，计算属性，属性侦听，生命周期函数等

组件注意点：注册组件时组件名不能用系统使用过的，一个组件的template模板中只能有一个根元素，注册时用驼峰命名，使用时可用连字符代替

局部组件

    <div id="app">
        <Box></Box>
        <my-box></my-box>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{},
            methods: {},
            components:{
                // 注册局部组件
                Box:{
                    template:`<div>
                                <h1>welcome to aotu land</h1>
                            </div>`
                },
                MyBox:{
                    template:`<h2>aotu 666</h2>`
		}	
            },
            filters:{},
            watch:{},
            computed:{},
            directives:{},
            beforeCreate() {},
            created() {
                
            },
            beforeMount() {
                
            },
            mounted() {
                
            },
            beforeUpdate() {
                
            },
            updated() {
                
            },
            beforeDestroy() {
                
            },
            destroyed() {
                
            },

        })
    </script>

组件可以写在js文件中导出一个对象然后引入，使用的vue文件其实就是在webpack打包之后加载器会映射成一份js文件再挂载到页面上。

ps：一个组件的 data 选项必须是一个函数，函数返回一个对象，对象中就是该组件可以使用的每个数据

    <div id="app">
        <!-- 3.使用组件 -->
        <Box></Box>
        <my-box></my-box>
    </div>
    <script type="module">
        // 1.引入组件
        import Box from './Box.js'
        new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
                // 2.注册组件
                Box,
                MyBox: {
                    template: `<h2>aotu 666</h2>`
                }
            }
        })
    </script>
</body>

let Box = {
    template: `<div>
                    <h1>{{msg}}</h1>
                    <button @click="fn">显示数据</button>
                    <button @click="fm">隐藏数据</button>
                    <div v-for="el in member" v-if="flag">
                        <p>{{el.name}}-{{el.player}}</p>
                    </div>
                </div>`,
    data() {
        return {
            msg:"welcome to aotu land",
            member:[
                {name:"jess",player:"leader"},
                {name:"cici",player:"member"},
                {name:"erjie",player:"member"},
                {name:"lili",player:"member"},
                {name:"jiejing",player:"member"}
            ],
            flag:false
        }
    },
    methods: {
        fn(){
            this.flag=true;
            console.log("数据已经显示");
        },
        fm(){
            this.flag=false;
            console.log("数据已经隐藏");
        }
    },
};
export default Box;

组件的嵌套

    <div id="app">
        <team></team>
    </div>
    <script>
        new Vue({
            el: "#app",
            components: {
                // 局部注册组件
                team: {
                    template: `<div>
                    <h1>{{msg}}</h1>
                    <button @click="fn">显示数据</button>
                    <button @click="fm">隐藏数据</button>
                    <div v-for="el in member" v-if="flag">
                        <p>{{el.name}}-{{el.player}}</p>
                    </div>
                    <team-info></team-info>
                </div>`,
                    data() {
                        return {
                            msg: "welcome to aotu land",
                            member: [
                                { name: "jess", player: "leader" },
                                { name: "cici", player: "member" },
                                { name: "erjie", player: "member" },
                                { name: "lili", player: "member" },
                                { name: "jiejing", player: "member" }
                            ],
                            flag: false
                        }
                    },
                    methods: {
                        fn() {
                            this.flag = true;
                            console.log("数据已经显示");
                        },
                        fm() {
                            this.flag = false;
                            console.log("数据已经隐藏");
                        }
                    },
                    components: {
                        // 局部注册，嵌套在team组件中，这个标签要写在team组件中的template
                        TeamInfo: {
                            template: `<h6>{{msg}}</h6>`,
                            data() {
                                return {
                                    msg: "AOTU 666",
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>

组件的嵌套，嵌套的组件的使用标签必须要写在被嵌套组件中的template