vue全家桶之组件基础（七）

1、组件注册

（1）全局注册

// scriptVue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '全局组件显示： {{ count }}'});new Vue({
    el: '#app'});// html使用

（2）局部注册

// scriptnew Vue({
    el: '#app',
    components:{
        "button-inner":{
            data: function() {
                return {
                    inner: 0
                }
            },
            template: '局部组件显示： {{ inner }}'
        }
    }});// html使用

2、props属性传值

（1）属性取值

// scriptnew Vue({
        el: '#app',
        components:{
            "button-props":{
                template:`参数1： {{ here }}:---参数2： {{fromHere}}

`,                 props:['here', 'fromHere']             }         }     });// html使用

PS：如果属性带“-”，props中需要驼峰取值
（2）在构造器向组件传值（v-bind）

// scriptnew Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        components:{
            "button-props":{
                template:`参数1： {{ here }}:---参数2： {{fromHere}}

`,                 props:['here', 'fromHere']             }         }     });// html使用

3、父子组件

// script// 子组件var city = {
    template:`
Sichuan of China
`}// 父组件var parent = {
    template:
        `

            
 Panda from China!
            
        
`,
    components:{
        "city": city    }}// 实例化new Vue({
    el: '#app',
    // 定义局部组件
    components:{
        // 组件注册
        "parent": parent    }});// html使用

完整示例代码

    // 定义全局组件     Vue.component('button-counter', {         data: function () {             return {                 count: 0             }         },         template: '全局组件显示： {{ count }}'     });     // 子组件     var city = {         template:`

Sichuan of China

`     }     // 父组件     var parent = {         template:             `

                

 Panda from China!

                             

`,         components:{             "city": city        }     }     // 实例化     new Vue({         el: '#app',         data: {             message: 'hello'         },         // 定义局部组件         components:{             "button-inner":{                 data: function() {                     return {                         inner: 0                     }                 },                 template: '局部组件显示： {{ inner }}'             },             // 取值             "button-props":{                 template:`参数1： {{ here }}:---参数2： {{fromHere}}

`,                 props:['here', 'fromHere']             },             // 组件注册             "parent": parent        }     });

转载于:https://blog.51cto.com/4547985/2390747