小小的介绍vue.js中的组件使用

最新推荐文章于 2024-01-05 21:14:42 发布

qq_39142654

最新推荐文章于 2024-01-05 21:14:42 发布

阅读量101

点赞数 1

本文链接：https://blog.csdn.net/qq_39142654/article/details/89421310

版权

1.先说说组件化思维

组件化针对的是页面中的整个完整的功能模块划分（项目的分工）

2.组件的概念（一个文件）

组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的

3.那么Vue中如何定义，使用，操作组件

组件

Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中 options
Vue.component() 为什么要执行这个方法呢？

组件的表现形式是标签，组件要想合法化，必须注册

组件的注册有两种方式

全局注册
简写: Vue.component(组件的名称，options )
第一种写法：

<body>
    <div id="app">
        <hello></hello>  //使用组件hello
    </div>
    <div id="app_1">
        <hello></hello>//使用组件hello
    </div>
</body>
<script>
    var hello = Vue.extend({
        template: '<div>这是一个全局组件</div>'
    });          //用extend创建一个hello全局组件
    Vue.component('hello', hello)//使用component注册组件，组件名为"hello

    new Vue({
        el: '#app',
    })
    new Vue({
        el: '#app_1'
    })
</script>

第二种写法：

<body>
    <div id="app">
        <hello></hello>
        {{msg}}
    </div>
    <div id="app_1">
        <hello></hello>
    </div>
</body>
<script>
    Vue.component('hello', {
        template: '<h3>这也是一个全局注册</h3>',//直接使用component和template注册一个组件
    })
    new Vue({
        el: '#app',
        data: {
            msg: 'ni hao lulu'
        }
    })
    new Vue({
        el: '#app_1'
    })
</script>

全局注册中的组件嵌套

将子组件入父组件中注册后才能使用

<body>
    <div id="app">
        {{msg}}
        <father></father>
    </div>
</body>
<script>
    Vue.component('Father', {
        template: '<h3>father <son></son></h3>'//将子组件入父组件中注册后才能使用
    })
    Vue.component('son', {
        template: '<h3>son son</h3>'
    })
    new Vue({
        el: '#app',
        data: {
            msg: 'ni hao lulu'
        }
    })
</script>

局部注册
语法：
new Vue({
components: {
组件名：组件的配置项
}
})
例：

<body>
    <div id="app">
        {{msg}}
        <hello-jia></hello-jia>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'ni hao lulu'
        },
        components: {
            'hello-jia': {
                template: '<div>这是一个超想鹿鹿的局部组件</div>'
            }
        }
    })
</script>

局部注册组件嵌套：

子组件必须在父组件中注册之后才能在父组件的模板中使用

<body>
    <div id="app">
        {{msg}}
        <father></father>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'ni hao lulu'
        },
        components: {
            'Father': {
                template: '<div>father <son></son></div>',
                components: {
                    'son': {
                        template: '<h3>son</h3>'
                    }
                }
            }
        }
    })
</script>

template外用组件

例：

<body>
    <div id="app">
        {{msg}}
        <lulu></lulu>
    </div>
    <template id="lulu"> 
        <div>
            <ul>
                <li>
                    <a href="">鹿鹿</a>
                    <a href="">鹿鹿</a>
                    <a href="">鹿鹿</a>
                    <a href="">鹿鹿</a>
                </li>
            </ul>
        </div>
    </template>
</body>
<script>
    Vue.component('lulu', {
        template: '#lulu'
    })
    new Vue({
        el: '#app',
        data: {
            msg: 'ni hao lulu'
        }
    })
</script>

使用组件data选项

例：

<body>
    <div id="app">
        {{msg}}
        <hello></hello>
    </div>
    <template id="lulu">
        <div>
            {{dear}}
        </div>
    </template>
</body>
<script>
    Vue.component('hello', {
        template: '#lulu',
        data() {
            return {
                dear: 'dear deer'
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            msg: 'ni hao lulu'
        }
    })
</script>

根实例中的data选项是一个对象，但是组件中的data选项是一个函数， why?
解释：
函数的作用：

函数有独立作用域
函数可以有return 返回值，
组件的data选项必须有return 返回值，并且返回值是一个对象
组件的数据在组件的模板中使用

qq_39142654

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小小的介绍vue.js中的组件使用

1.先说说组件化思维组件化针对的是页面中的整个完整的功能模块划分（项目的分工）2.组件的概念（一个文件）组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体优点：代码复用，便于维护划分组件的原则：复用率高的，独立性强的3.那么Vue中如何定义，使用，操作组件组件Vue.extend() ===> 组件中也可以书写 Vue这个构造器函数中...
复制链接

扫一扫