基于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实现控制内容的向上向下滚动效果
Jun 26 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
移动端js图片查看器
2016/11/17 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
关于Python的一些学习总结
2018/05/25 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python代码能做成软件吗
2020/07/24 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
工业设计专业个人求职信范文
2013/12/28 职场文书
中秋节超市促销方案
2014/01/30 职场文书
个人学习总结范文
2015/02/15 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
肖申克救赎观后感
2015/06/02 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2016十一国庆节感言
2015/12/09 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server