Vue 中组件的使用

一、局部组件的使用。

渲染组件-父使用子组件。

1、声子：创建子组件（对象）。

        // 局部组件：声子  挂子 用子
        var Vheader  = {
            template:`
                <div class='head'>
                    我是头部组件
                    <Vbtn></Vbtn>
                </div>`
        };

2、挂子：在父组件中声明，根属性 components:{组件名: 组件对象}。

        // 1.声明局部组件
        var App  = {
            template:`
                <div class='main'>
                </div>
            `,
            data(){
                return {
                }
            },
            components:{
                Vheader,
                Vaside,
                Vcontent
            }
        };

3、在父组件要用的地方使用 <组件名></组件名>。

        // 1.声明局部组件
        var App  = {
            template:`
                <div class='main'>
                    <Vheader />
                    <div class = 'main2'>
                        <Vaside />
                        <Vcontent />
                    </div>
                </div>
            `,
            data(){
                return {
                }
            },
            components:{
                Vheader,
                Vaside,
                Vcontent
            }
        };

注意：在不同的框架中，有的不支持大写字母。例如组件名称为MyHeader，使用时  my-header。

总结：有父、声子、挂子、用子。

二、组件的深入。

1、父子组件传值（父传子）。

1.1、父用子组件的时候通过属性 Prop 传递。

1.2、子要声明 props:['属性名'] 来接收父的值。

1.3、收到的就是自己的了，在 template 中直接用，在 js 中 this.属性名 获取。

总结：父传，子声明。

        var Vcontent = {
            template:`
                <div class="content">我是内容组件
                    <ul>
                        <li v-for='(item,index) in posts'>
                            <h3>{{index}}</h3>
                            <p>{{item.name}}</p>
                            <p>{{item.age}}</p>
                        </li>
                    </ul>
                    <Vbtn @click.native='add'>删除</Vbtn>
                </div>
            `,
            props:['posts'],
            methods:{
                add(){
                    alert(1);
                }
            }
        }

        var App = {
            template:`
                <div class='main' :style='{fontSize:postFontSize+"em"}'>
                    <Vheard @change='chaneHandler' />
                    <div class="main2">
                        <Vaside/>
                        <Vcontent :posts='posts' />
                    </div>
                </div>
            `,
            methods:{
                chaneHandler(){
                    this.postFontSize+=.1;
                }
            },
            data(){
                return{
                    posts:[
                        {"id":1, "name":'张三', "age":23},
                        {"id":2, "name":'李四', "age":20},
                        {"id":3, "name":'王五', "age":26},
                        {"id":4, "name":'赵六', "age":28},
                    ],
                    postFontSize:1.5
                }
            },
            components:{
                Vheard,
                Vaside,
                Vcontent
            }
        }

总结父传子：

　　父用子：先声子、挂子、用子。

　　父传子：父传子（属性），子声明（接收），就可以当成自己的直接用。

 2、子传父。

2.1、在父组件中定义自定义事件。<Vheard @change='chaneHandler' />

父组件代码：

        var App = {
            template:`
                <div class='main' :style='{fontSize:postFontSize+"em"}'>
                    <Vheard @change='chaneHandler' />
                    <div class="main2">
                        <Vaside/>
                        <Vcontent :posts='posts' />
                    </div>
                </div>
            `,
            methods:{
                chaneHandler(){
                    this.postFontSize+=.1;
                }
            },
            data(){
                return{
                    posts:[
                        {"id":1, "name":'张三', "age":23},
                        {"id":2, "name":'李四', "age":20},
                        {"id":3, "name":'王五', "age":26},
                        {"id":4, "name":'赵六', "age":28},
                    ],
                    postFontSize:1.5
                }
            },
            components:{
                Vheard,
                Vaside,
                Vcontent
            }
        }

 

2.2、在子组件中定义点击事件。

　　<button @click='changeFontSize'>字体变大按钮</button>

2.3、在点击事件的方法内使用 this.$emit('父组件声明的自定义事件') 触发父组件的自定义事件。

子组件代码：

        var Vheard = {
            template:`
                <div class="heard">我是头部组件
                    <button @click='changeFontSize'>字体变大按钮</button>
                </div>
            `,
            methods:{
                changeFontSize(){
                    // 触发父组件中声明的自定义事件
                    this.$emit('change')
                }
            }
        }

 

三、全局组件的定义。多出使用的公共性功能组件，就可以注册成全局组件,减少冗余代码。

　　全局 API Vue.component('组件名',组件对象);

        // 全局组件
        // 第一个参数是组件的名字，第二个参数是options
        Vue.component('Vbtn',{
            template:`<button>按钮</button> `
        });