Vue全局组件与局部组件的区别

最新推荐文章于 2024-06-12 14:21:23 发布

兵腾傲宇

最新推荐文章于 2024-06-12 14:21:23 发布

阅读量9.2k

点赞数 5

分类专栏： Vue js 控件组件

本文链接：https://blog.csdn.net/qq_23334071/article/details/80687424

版权

1、组件声明

<!-- 全局组件模板father模板 -->
<template id="father">
    <div>
         <h3>这是{
  {name}}</h1>
         <div>
             <p>这是{
  {data}}</p>
         </div>
    </div>
</template>

var FATHER = {
    template: "#father",
    data: function() {
         return {
              name: "一个全局组件-模板-",
              data: "数据：18892087118"
         }
     }
 };

2、组件注册

Vue.component('father', FATHER);

3、组件挂载

<h5>全局组件1</h5>
<father></father>

4、组件实例

<!DOCTYPE html>
<html>
<head>
    <tit

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

兵腾傲宇

关注关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue全局组件与局部组件的区别

1、组件声明&lt;!-- 全局组件模板father模板 --&gt;&lt;template id="father"&gt; &lt;div&gt; &lt;h3&gt;这是{{name}}&lt;/h1&gt; &lt;div&gt; &lt;p&gt;这是{{data}}&lt;/p&
复制链接

扫一扫