基于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 读取和设置文档元素的样式属性
Apr 14 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
JavaScript实现九宫格拖拽效果
Jun 28 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
改造一台复古桌面收音机
2021/03/02 无线电
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
非常实用的php验证码类
2016/05/15 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
在Python中COM口的调用方法
2019/07/03 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python字符串的修改方法实例
2019/12/19 Python
Django websocket原理及功能实现代码
2020/11/14 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
PHP面试题及答案二
2015/05/23 面试题
运动会致辞稿50字
2014/02/04 职场文书
音乐教学随笔感言
2014/02/19 职场文书
大专学生求职自荐信
2014/07/06 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
礼貌问候语大全
2015/11/10 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
AJAX学习笔记
2021/05/18 Javascript
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS