深入浅析Vue全局组件与局部组件的区别


Posted in Javascript onJune 15, 2018

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> 
  <title>vue2.0 --- 局部组件与全局组件</title> 
</head> 
<body> 
  <h3>vue2.0局部组件与全局组件</h3> 
  <div id='app'> 
    <h5>局部组件</h5> 
    <fatherlocal></fatherlocal> 
    <hr> 
    <h5>全局组件1</h5> 
    <father></father> 
    <hr> 
    <h5>全局组件2</h5> 
    <child :fromfather='giveData'></child> 
  </div> 
  <!-- 局部组件模板fatherlocal --> 
  <template id="father-local"> 
    <div> 
      <h3>这是{{name}}</h1> 
      <div> 
        <p>这是{{data}}</p> 
      </div> 
    </div> 
  </template> 
  <!-- 全局组件模板father --> 
  <template id="father"> 
    <div> 
      <h3>这是{{name}}</h1> 
      <div> 
        <p>这是{{data}}</p> 
      </div> 
    </div> 
  </template> 
  <template id="child"> 
    <div> 
      <h3>这是{{name}}</h3> 
      <div> 
        <p>{{cmsgtwo}}</p> 
        <p>{{cmsg}}</p> 
        <p>{{fromfather}}</p> 
        <p>{{fromfather.fmsg}}</p> 
        <p><input type="button" value="按钮" @click=" "></p> 
      </div> 
    </div> 
  </template> 
  <script src="vue_2.2.2_vue.min.js"></script> 
  <script type="text/javascript"> 
    // 定义组件 
    var FATHER = { 
      template: "#father", 
      data: function() { 
        return { 
          name: "一个全局组件-模板-", 
          data: "数据:18892087118" 
        } 
      } 
    }; 
    var CHILD = { 
      template: "#child", 
      data: function() { 
        return { 
          name: "子组件", 
          cmsg: "子组件里的第一个数据", 
          cmsgtwo: "子组件里的第二个数据" 
        } 
      }, 
      methods: { 
        change: function() { 
          this.fromfather.fmsg = "子组件数据被更改了" 
        } 
      }, 
      mounted: function() { 
        this.cmsg = this.fromfather; 
      }, 
      props: ["fromfather"], 
    }; 
    // 注册组件 
    Vue.component('father', FATHER); 
    Vue.component("child", CHILD); 
    var vm = new Vue({ 
      data: { 
        fmsg: "data里的数据", 
        giveData: { 
          fmsg: "这是父组件里的数据" 
        } 
      }, 
      methods: {}, 
      // 局部组件fatherlocal 
      components: { 
        'fatherlocal': { 
          template: '#father-local', 
          data: function() { 
            return { 
              name: "局部-父组件", 
              data: "局部-父组件里的数据" 
            } 
          } 
        } 
      } 
    }).$mount('#app'); 
  </script> 
</body> 
</html>

6、特殊的属性is

当使用 DOM 作为模板时 (例如,将el选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>限制了能被它包裹的元素,而一些像<option>这样的元素只能出现在某些其它元素内部。

自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:

<body>  
  <div id="app1">  
    <ul>   
      <li is="my-component"></li>  
    </ul>  
  </div>  
  <script>  
    Vue.component("my-component",{   
      template:"<h1>{{message}}</h1>",   
      data:function(){    
        return {     
          message:"hello world"    
        }   
      }  
    });  
    new Vue({   
      el:"#app1"  
      })  
  </script>  
</body>

总结

以上所述是小编给大家介绍的Vue全局组件与局部组件的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
react-native android状态栏的实现
Jun 15 #Javascript
JS实现监控微信小程序的原理
Jun 15 #Javascript
vue .sync修饰符的使用详解
Jun 15 #Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 #Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 #Javascript
vue和webpack安装命令详解
Jun 15 #Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 #Javascript
You might like
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
prototype 的说明 js类
2006/09/07 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
python中list常用操作实例详解
2015/06/03 Python
Python中pillow知识点学习
2018/04/30 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
django-csrf使用和禁用方式
2020/03/13 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
大学生自我鉴定
2013/12/16 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
导师对论文的学术评语
2015/01/04 职场文书
大学生逃课检讨书
2015/05/04 职场文书
少先队工作总结2015
2015/05/13 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
python 模块重载的五种方法
2021/04/24 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
深入理解pytorch库的dockerfile
2022/06/10 Python