最详细之--Vue组件定义学习-蒲公英云

最详细之--Vue组件定义学习

电玩女神 2023-02-25 15:29 25阅读 0赞

一、组件的定义

1、全局组件定义（两种定义法）

// 定义全局组件写法一：
    Vue.component('comp',  //注意组件字母别写错了！写多了n
        { 
            template: ` <div> 这里是组件 <button @click = handleback()>按钮！</button> <child></child> //这里是自己的儿子组件 这里{ {money}}元 </div>`,
            // components:{ 
            // child:'<div>这是自己的子组件啊</div>'
            // } 没这种骚气的写法
            methods: { 
                handleback() { 
                    console.log('back!')
                }
            },
            data() { //data在这里必须是一个函数！不能像methods那样写的！
                return { //函数一定要写return的吗？？
                    money: 10
                }
            }
        })
    // 定义全局组件写法二：
    Vue.component('comp1', { 
        template: '#box'
    })
    // 全局子组件
    Vue.component('child', { 
        template: '<button @click = turnRight()>儿子组件</button>', //后面出现错误就看前面的逗号是不是忘记写了！
        methods: { 
            turnRight() { 
                console.log('right!')
            }
        }
    })

注意：记得写vue实例化，实例化相当于一个root的组件

使用组件：

<!-- 没有根组件承载是不行的！！ -->
    <div id="app">
        <!-- 使用组件 -->
        <comp>
            <child></child>>
        </comp>
        <comp1>
            <!-- 把组件名也写上会更好一些！ -->
            <template id="box">
                <div>
                    这里是组件啊
                    <child></child>
                </div>
            </template>
        </comp1>

2、局部组件的定义

new Vue({ 
        el: '#app',
        // 局部组件定义
        components:{  //这个是有s的
            'jucom':{ 
                template:'#jubox'
            }
        }
    })

局部组件的使用：

//也是在vue实例化下使用哇！
<jucom>
            <template id="jubox">
                <div>这里是局部定义的组件！</div>  
                <!-- 在template里需要用个div包住再写这个其他东西！ -->
            </template>
        </jucom>