组件

最新推荐文章于 2021-10-19 16:41:55 发布

原创最新推荐文章于 2021-10-19 16:41:55 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

博客介绍了Vue的全局组件、局部组件，props属性的动态绑定、类型验证，子组件自定义方法等内容。同时提醒，因html不区分大小写，常使用横线连接，Vue内部会将其转为驼峰命名，且html会把大写字母解析为小写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件

<body>
    <div id="app">
        <child ></child>
    </div>

    <script>
        // 全局组件
        Vue.component('child',{
           template:'<h1>child<h1/>'
        })

        new Vue({
            el:"#app"
        })
    </script>
</body>

局部组件

<body>
    <div id="app">
        <child ></child>
    </div>

    <script>
        var childComponent = {
            template:"<h1>局部组件<h1/>"
        }
        // 局部组件
        new Vue({
            el:"#app",
            components:{
                'child':childComponent
            }
        })
    </script>
</body>

props属性

<body>
    <div id="app">
        <child message="test"></child>
    </div>

    <script>

        //prop
        Vue.component('child',{
            props:['message'],
            template:'<h1>{{message}}<h1/>'
        })
        new Vue({
            el:"#app"
        })
    </script>
</body>

动态绑定

<body>
    <div id="app">
        <input type="text" v-model="message">
        <child  v-bind:test="message"></child>
    </div>

    <script>

        //prop动态绑定
        Vue.component('child',{
            props:['test'],
            template:'<h1>{{test}}<h1/>'
        })
        new Vue({
            el:"#app",
            data:{
                message:'test'
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <ol>
            <child v-for="item in message" :test="item"></child>
        </ol>
    </div>

    <script>

        //prop动态绑定
        Vue.component('child',{
            props:['test'],
            template:'<li>{{test.name}}</li>'
        })
        new Vue({
            el:"#app",
            data:{
                message:[
                      {name:'小明'},
                      {name:'小红'},
                      {name:'小李'},
                ]
            }
        })
    </script>
</body>

类型验证

<body>
    <div id="app">
        <ol>
            <child v-for="item in message" test="item"></child>
        </ol>
    </div>

    <script>

        //prop动态绑定
        Vue.component('child',{
            props:{

                test: {
                    type: Object,
                    required:true
                }
            },
            template:'<li>{{test.name}}</li>'
        })
        new Vue({
            el:"#app",
            data:{
                message:[
                      {name:'小明'},
                      {name:'小红'},
                      {name:'小李'},
                ]
            }
        })
    </script>
</body>

子组件自定义方法

<body>
<div id="app">
    {{count}}
    <br/>
   <child-component :init-value=count @add-event="addFunction"></child-component>
</div>

<script>

    Vue.component('child-component',{
        props:['initValue'],
        data:function () {
            return{
                countValue:this.initValue
            };
        },
        template:'<button @click="addFunction">{{countValue}}</button>',
        methods:{
            addFunction: function () {
                this.countValue++;
                this.$emit('add-event');
            }
        },

    })

    new Vue({
        el:"#app",
        data:{
            count:"11"
        },
        methods: {
            addFunction:function () {
                this.count++;
            }
        }
    })

</script>
</body>