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

一、组件的定义

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>