基于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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
微信小程序实现简单文字跑马灯
May 26 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(1)
2006/10/09 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Python Web版语音合成实例详解
2019/07/16 Python
python实现代码统计器
2019/09/19 Python
pygame实现弹球游戏
2020/04/14 Python
详解python内置模块urllib
2020/09/09 Python
python入门教程之基本算术运算符
2020/11/13 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
公司合作意向书
2014/04/01 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
房屋所有权证明
2014/10/20 职场文书
参加招聘会后的感想
2015/08/10 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python