基于Vue全局组件与局部组件的区别说明


Posted in Javascript onAugust 11, 2020

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组件之入门:全局组件三种定义

不论我们使用哪种方式创建出来的组件,组件中的template属性指向的模板内容中,必须有且只有一个根元素,其他元素必须在这个根元素下面。

1.使用Vue.extend配合Vue.component定义全局组件

在使用Vue.extend配合Vue.component定义全局组件时,Vue.extend里面定义template模板,而Vue.component里面是要注册一个组件。

<body>
<div id="app">
 <!--第三步页面中使用 -->
 <!-- 如果要使用组件,直接把组件的名称以HTML标签的形式引入到页面中-->
 <my-compnent></my-compnent>
</div>
<script>
 //第一步:使用Vue.extend来创建全局组件
 var com1 = Vue.extend({
  //通过template模板的属性来展示组件要显示的html
  template: '<h2>使用Vue.extend创建全局组件</h2>'
 });
 //第二步:使用 Vue.component('组件名称',创建出来的组件模板对象)
 Vue.component('myCompnent', com1);
 // 创建 Vue 实例,得到 ViewModel
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {}
 });
</script>
</body>

【注意】在定义注册组件时,组件的名称不需要按照驼峰命名,但是在页面引入组件时,组件的名称必须按照驼峰命名。

基于Vue全局组件与局部组件的区别说明

简写如下:

基于Vue全局组件与局部组件的区别说明

2.直接使用Vue.component定义全局组件

这里是直接使用Vue.component直接创建一个组件

<div id="app">
 <my-com2></my-com2>
</div>
<script>
 Vue.component('myCom2', {
  template: '<h2>直接使用Vue.component创建组件</h2>'
 });
 // 创建 Vue 实例,得到 ViewModel
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {}
 });
</script>

3.Vue外部直接定义template

<body>
<div id="app">
 <my-com3></my-com3>
</div>
<template id="tmp1">
 <div>
  <h2>这是通过template元素,在外部定义组件的结构,有代码的提示和高亮</h2>
 </div>
</template>
<script>
 Vue.component('myCom3', {
  template: "#tmp1"
 });
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {}
 });
</script>
</body>

基于Vue全局组件与局部组件的区别说明

以上这篇基于Vue全局组件与局部组件的区别说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 #Javascript
vue实现图片按比例缩放问题操作
Aug 11 #Javascript
JavaScript中while循环的基础使用教程
Aug 11 #Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
js实现列表按字母排序
Aug 11 #Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
You might like
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
化工工艺设计求职信
2014/06/25 职场文书
社区两委对照检查材料
2014/08/23 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python