一、局部组件的使用。

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

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
            }
        }

总结父传子：

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

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

 

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

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

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

 

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

}},components:{Vheader,Vaside,Vcontent}};

原文地址：http://www.cnblogs.com/sfwu/p/16898081.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性