深入浅析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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
js canvas实现五子棋小游戏
Jan 22 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 htmlspecialchars加强版
2010/02/16 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
简单的js分页脚本
2009/05/21 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
javascript工具库代码
2012/03/29 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python实现注册、登录小程序功能
2018/09/21 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python输入多行字符串的方法总结
2019/07/02 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
舞出我人生观后感
2015/06/16 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技