vue自定义组件的递归

1、设置一个div显示数值（这个数值不要设置在组件内部）

2、设置组件的名字

<!DOCTYPE html>
<html>

<head>
    <title> hello world vue </title>
    <meta charset="utf-8" />
</head>

<body>
    <div id="app" v-cloak>
        <!-- 给子组件的变量赋值为1 -->
        <child-component :count="3"></child-component>

    </div>
</body>

</html>

<script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script>


<script>
    $(document).ready(function() {

    });
</script>


<script>
    Vue.component('child-component', {
        template: '<div> <child-component  :count = "count+1" v-if="count<100"></child-component> {{count}} </div>',
        name: 'child-component',
        props: {
            count: {
                type: Number,
                default: 5
            }
        },
        data: function() {
            return {}
        },
        methods: {}
    });

    var app = new Vue({
        el: '#app',
        data: {},
        computed: {},
        methods: {},
        components: {},
        mounted: function() {}
    });
</script>

posted on 2019-09-07 16:43 qqhfeng16 阅读(860) 评论(0) 编辑收藏举报