基于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 八进制转义字符(8进制)
Apr 08 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php常用的安全过滤函数集锦
2014/10/09 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
学习jquery之一
2007/04/27 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python实现飞船大战
2020/04/24 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
新东网科技Java笔试题
2012/07/13 面试题
在校生党员自我评价
2013/09/25 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
安全生产计划书
2014/05/04 职场文书
武夷山导游词
2015/02/03 职场文书
公司人事任命通知
2015/04/20 职场文书
亮剑观后感
2015/06/05 职场文书
六年级语文教学反思
2016/03/03 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js