ADSFASFDA

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
vue父子组件的嵌套 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
</head>
<body>
<template id="child">
    <p>this is child template</p>
</template>
<template id="parent">
    <p>this is parent template</p>
    <child></child>
    <child></child>
</template>
<div id="app">
    <parent></parent>
</div>
<script src="vue.js"></script>
<script>
    var childComponent = Vue.extend({
        template: '#child'
    });
    Vue.component("parent",{
        template: '#parent',
        components: {
            'child': childComponent,
        }
    });
    var app = new Vue({
        el: '#app'
    });
</script>
</body>
</html>

 方法2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
</head>
<body>
<div id="app">
    <parent></parent>
</div>
<script src="vue.js"></script>
<script>
    var childComponent = Vue.extend({
        template: '<p>this is child template</p>'
    });
    Vue.component("parent",{
        template: '<p>this is parent template</p><child></child><child></child>',
        components: {
            'child': childComponent,
        }
    });
    var app = new Vue({
        el: '#app'
    });
</script>
</body>
</html>
View Code

 

posted on 2017-03-25 00:47  778323309  阅读(213)  评论(0)  编辑  收藏  举报