技术原理

Vue 之温馨 component 的全球 - 1

近期又再重複的温馨了 Vue 的 component,期待能再次帮自身梳理心绪

component 别名元器件,在网页页面大家每一个区块链內容都能够封裝成一个单独的元器件,而元器件还能够再包复别的元器件,有点儿相近 HTML 的标籤还能够再包复标籤的定义是一样的。

创建 component

而在 Vue 里边,创建 component 有分成地区性跟全域性:

地区性的创建以下:

const child = {
    teamplate: '',
    props: [],
}

const app = new Vue({
    el: '#app',
    data: {},
    components: {
        'my-component': child
    }
});

而全域性,则是採用了 Vue.component() 的方式:

Vue.component('my-component', {
    template: '',
    props: [],
});

而二者的区别取决于,当今日有两个 Vue 实体线时,全域性的 component 能够 被重複运用,但地区性的 component 则没法,下边採用了产业生态圈的 component 创建,因此在 app2 内 my-conponent 是能够 被运行的:

<div id="app">
    <my-component></my-component>
</div>

<div id="app2">
    <my-component></my-component>
</div>

<script>
    Vue.component('my-component', {
        template: '<div>Hello</div>'
    });

    const app = new Vue({
        el: '#app',
    });
    const app2 = new Vue({
        el: '#app2',
    });
</script>

假如改为地区性:

<script>
    const child = {
        template: '<div>Hello</div>'
    };
    const app = new Vue({
        el: '#app',
        components: {
            'my-component': child
        }
    });
    const app2 = new Vue({
        el: '#app2',
    });
</script>

大家仅在 app 内的 components 启用了 child 这一变化,并沒有也在 app2 内也启用,因此这时 app2 内的 my-component 是会出現不正确的通告

data function return

然后如果我们创建 component 时,要应用 data 这一方式时,需应用 function return,它是防止跟 Vue 实体线的材料矛盾:

Vue.component('myComponent', {
    template: '<button @click="counter   "></button>'
});

const app = new Vue({
    el: '#app',
    data: {
        counter: 0,
    }
});

假如那样写,Vue.component() 内并无应用 data function return,当 button 被点一下时,是立即变更 Vue 实体线的材料的,防止那样的情况,因此要改为以下:

Vue.component('myComponent', {
    template: '<button @click="counter   "></button>',
    data: function(){
        return {
            counter: 0
        }
    }
});

x-template 封裝 HTML

前边大家创建 component 时,所应用的 template 特性,全是立即授予 HTML 內容,但今日假如 HTML 內容过多的情况下,便会看起来界面很乱太过度複杂,因此这个时候大家就可以应用 x-template 来封裝 HTML 的內容,而且大家立即用 id 通话就可以:

<script type="text/x-template" id="my-component">
    <div class="card">
        ...
    </div>
</script>

<script>
    Vue.component('my-component', {
        template: '#my-component'
    });
</script>

在 template 通话 x-template 的 id 就可以
这儿要留意一个小重中之重,x-template 内最表层仅只有有一个连接点

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能的 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录