vuejs私有组件创建的方式

admin2022-01-15384

vuejs中的私有组件用components属性进行创建,下面的login是组件的名称,里面是个对象,所以可以创建多个组件。

var vm = new Vue({
            el: '#main',
            components: {
                login: {
                    template: '#temp',
                }
            }
        })

然后创建模版

<template id="temp">
        <h1>登录组件---{{msg}}</h1>
</template>

最后在div内进行显示

<div id="main" v-cloak>
        <login></login>
</div>

完整代码

    <div id="main" v-cloak>
        <login></login>
    </div>
    <template id="temp">
        <h1>登录组件---{{msg}}</h1>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#main',
            components: {
                login: {
                    template: '#temp',
                }
            }
        })
    </script>

在组件内还可以使用data和方法,它们和组件模版平级,值得说明的是这里面的data虽然是个属性,但是是以方法的形式存在。

<script>
        var vm = new Vue({
            el: '#main',
            components: {
                login: {
                    template: '#temp',
                    data() {
                        return {
                            msg: '组件中data    '
                        }
                    },
                    methods: {}
                }
            }
        })
</script>

组件中的data数据也可以用{{}}在组件的模版里面显示

<template id="temp">
        <h1>登录组件---{{msg}}</h1>
</template>

相关文章:

vuejs全局组件创建的方式

网友评论