Vue.js入门 0x4 组件（Component）（1）组件与复用

最新推荐文章于 2021-09-10 19:10:40 发布

cellinlab

最新推荐文章于 2021-09-10 19:10:40 发布

阅读量410

点赞数

分类专栏： JavaScript 前端基础文章标签： Vue组件与复用 Vue组件 template

本文链接：https://blog.csdn.net/funkstill/article/details/86688610

版权

前端基础同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

JavaScript

152 篇文章 2 订阅

订阅专栏

组件（ Component）是 Vue. 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。

组件与复用

为什么使用组件

Vue扣的组件就是提高重用性的，让代码可复用！

组件用法

组件与Vue实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何 Vue 实例都可以使用。

template的 DOM 结构必须被一个元素包含，如果直接写成 “这里是组件的内容”，不带“<div></div＞”是无法渲染的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Vue</title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            Vue.component('my-component',{
                template:'<div>这里是组件的内容</div>'
            });
            var app = new Vue({
                el:'#app'
            })
        </script>
    </body>
</html>

在 Vue 实例中，使用 componen饱选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。组件中也可以使用 components 选项来注册组件，使组件可以嵌套。

<div id="app">
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var Child = {
        template:'<div>局部注册的内容</div>'
    }
    var app = new Vue({
        el:'#app',
        components:{
            'my-component':Child
        }
    })
</script>

Vue 组件的模板在某些情况下会受到 HTML 的限制，比如<table>内规定只允许是<tr>、<td>、<th>等这些表格元素，所以在<table>内直接使用组件是无效的。这种情况下，可以使用特殊的js属性来挂载组件

<div id="app">
    <table>
        <tbody is="my-component"></tbody>
    </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    Vue.component('my-component',{
        template:'<div>这里是组件的内容</div>'
    });
    var app = new Vue({
        el:'#app'
    })
</script>

除了 template 选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 data、computed 、methods 等。但是在使用 data 时,和实例稍有区别,data 必须是函数，然后将数据 return 出去

<div id="app">
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    Vue.component('my-component',{
        template:'<div>{{message}}</div>',
        data:function(){
            return{
                message:'组件内容'
            }
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>

JavaScript 对象是引用关系，所以如果 return 出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步。

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var data = {
        counter:0
    };
    Vue.component('my-component',{
        template:'<button @click="counter++">{{counter}}</button>',
        data:function(){
            return data;
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>

组件使用了 3 次，但是点击任意一个＜button> , 3 个的数字都会加 1 ，那是因为组件的 data 引用的是外部的对象，这肯定不是我们期望的效果，所以给组件返回一个新的 data 对象来独立

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    Vue.component('my-component',{
        template:'<button @click="counter++">{{counter}}</button>',
        data:function(){
            return {
                counter:0
            };
        }
    });
    var app = new Vue({
        el:'#app'
    })
</script>

cellinlab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门 0x4 组件（Component）（1）组件与复用

组件（ Component）是 Vue. 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。组件与复用为什么使用组件 Vue扣的组件就是提高重用性的，让代码可复用！组件用法组件与Vue实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后，任何 Vue 实例都可以使用。 templat...
复制链接

扫一扫