vue.js实战 第一篇 第七章 组件详解_组件的高级用法

递归组件

组件在其模板内递归调用自己，只要给组件设置name选项，同时必须给一个条件来限制递归数量。

<div id="app">
    <mc :count="1"></mc>
</div>
<script>
    Vue.component('mc',{
        name:'mc',
        props:{
            count:{
                type:Number,
                default:1
            }
        },
        template:'\
        <div class="child">\
            <mc :count="count+1" v-if="count<3"></mc>\
        </div>'
    });
</script>

内联模板

动态组件

异步组件

其他

$nextTick

Vue异步更新DOM，$nextTick知道什么时候DOM更新完成的。

X-Templates

解决js中拼接html代码，以后会介绍使用webpack编译.vue的单文件，优雅解决html书写的问题。

<div id="app">
    <mc></mc>
    <script type="text/x-template" id="mc">
        <div>text</div>
    </script>
</div>
<script>
    Vue.component('mc',{
        template:'#mc'
    });
</script>

手动挂载实例

对于动态创建的vue，用Vue.extend和$mount

<div id="app">
</div>
<script>
    var mc=Vue.extend({
        template:'<div>hello{{name}}</div>',
        data:function(){
            return{
                name:'Aresn'
            }
        }
    });
    new mc().$mount('#app');
    //或者
    new mc({
        el:'#app'
    })
</script>