Vue学习第三天

最新推荐文章于 2024-03-30 09:07:45 发布

原创最新推荐文章于 2024-03-30 09:07:45 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Vue.js中两种组件注册方式：全局注册和局部注册。在全局注册示例中，创建了一个名为`zmrQxt`的组件，包含`name`数据属性和多个方法。而在局部注册的例子中，定义了一个名为`qxt`的局部组件，并在根实例中使用。这两个例子展示了如何在Vue应用中灵活管理组件的可见性和作用域。

文章目录

- vue全局注册组件
- vue局部注册组件

vue全局注册组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

    <div id="app">
        <zmr-Qxt></zmr-Qxt>
    </div>

    <script>
        Vue.component('zmrQxt', {
            template: `<h1 @click='one'>赵梦冉{{name}}</h1>`,
            data() {
                return {
                    name: '邱勋涛'
                }
            },
            methods: {
                one() {
                    console.log('one')
                    console.log(this.two)
                },
                two() {
                    console.log('two')
                },
                there() {
                    console('this')
                }

            }
        })

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

</html>

vue局部注册组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        <html lang="en">

        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>

<body>

</body>

</html>
</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

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

    <script>
        var zmr = {
            template: '<h1>彼方尚有荣光在!</h1>'
        }

        // 创建根实例
        new Vue({
            el: '#app',
            components: {
                // <zmr> 将只在父模板可用
                'qxt': zmr
            }
        })
    </script>
</body>

</html>