vue组件的定义

最新推荐文章于 2024-05-20 17:02:17 发布

js之爷

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量136

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wangmingzhi111/article/details/130690716

版权

文章目录

全局组件定义

1.Vue.extend() Vue.component()

<body>
    <div id='app'>
        <login-a></login-a>
        <!-- Hello World! -->
    </div>
    <script>
        // 1.Vue.extend()  Vue.component()
        let login = Vue.extend({
            template: '<h2>Hello World!</h2>'
        })
        Vue.component('loginA', login)
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>

2.Vue.component()

<body>
    <div id='app'>
        <login></login>
        <!-- Hello HTML! -->
    </div>
    <script>
        // 2.Vue.component()
        Vue.component('login', {
            template: '<h2>Hello HTML!</h2>'
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>

3.Vue.component()

<body>
    <div id='app'>
        <login></login>
        <!-- Hello JavaScript! -->
    </div>
    <template id="hello">
        <h2>Hello JavaScript!</h2>
    </template>
    <script>
        // 3.Vue.component()
        Vue.component('login', {
            template: '#hello'
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>

4.Vue.component()

Vue.component() 有两个参数：
第一个参数：展示到页面的标签名；
第二个参数：对象{template：‘’}

<body>
    <div id='app'>
        <mine></mine>
        <!--    Hello Vue!
                数据驱动视图
                组件化开发 -->
    </div>
    <div id="next">
        <mine></mine>
        <!--    Hello Vue!
                数据驱动视图
                组件化开发 -->
    </div>
    <template id="mine">
        <div>
            <h2>Hello Vue!</h2>
            <div>数据驱动视图</div>
            <div>组件化开发</div>
        </div>
    </template>
    <script>
        // 4.Vue.component()
        Vue.component('mine', {
            template: '#mine'
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
        const v = new Vue({
            el: '#next',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>

私有组件定义

组件模板中只包含一个根元素
不能使用内置或保留的html元素作为组件id

<body>
    <div id='app'>
        <mine></mine>
        <!-- 
            html标签
            head标签
            body标签
            script标签
         -->
    </div>
    <template id="mine">
        <div>
            <h2>html标签</h2>
            <div>
                <h4>head标签</h4>
            </div>
            <div>
                <h4>body标签</h4>
            </div>
            <div>
                <h4>script标签</h4>
            </div>
        </div>
    </template>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            components: {
                'mine': {
                    template: '#mine'
                }
            }
        })
    </script>
</body>