vue 组件（component、components）

分手后的思念是犯贱 2022-12-12 15:07 220阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <button v-on:click="count++">我被点击了{
       {count}}次</button>
    
            
            <counter></counter>
            <counter></counter>
            <counter></counter>
    
    
    
            
            <button-c></button-c>
            <button-c></button-c>
            <button-c></button-c>
        </div>
    
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script>
            // 定义全局组件，方便复用,各组件counter会自动隔离，不会共用。
            // 1、组件其实也是一个vue实例，因此它在定义时也会接受：data、methods、生命周期函数等。
            // 2、不同的是组件不会与页面的元素绑定，否则就无法复用了，因此组件没有el属性。
            // 3、但是组件渲染需要html模板，所以增加了template属性，值就是html模板。
            // 4、全局组件定义完毕，任何vue实例可以直接在html中通过组件名称来使用组件了。
            // 5、data必须是一个函数，不再是一个对象。
            Vue.component("counter",{
                template:`<button v-on:click="count++">我被点击了{
       {count}}次</button>`,
                data() {
                    return {
                        count:1
                    }
                }
            });
    
            // 局部组件 :需要在vue实例中声明components属性。局部组件名称可以自定义
            const buttonCounter = {
                template:`<button v-on:click="count++">我被点击了{
       {count}}次~~</button>`,
                data() {
                    return {
                        count:1
                    }
                },
            };
    
            new Vue({
                el:"#app",
                data:{
                    count:1
                },
                components: {
                    'button-c':buttonCounter
                }
            })
        </script>
    </body>
    </html>