基于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 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
jquery实现pager控件示例
Apr 09 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
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 array操作10个小技巧分享
2011/06/23 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python实现kNN算法
2017/12/20 Python
python学生信息管理系统
2018/03/13 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
党员政治学习材料
2014/05/14 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
行政主管岗位职责
2015/02/03 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python