深入浅析Vue全局组件与局部组件的区别

(编辑：jimmy 日期: 2024/11/7 浏览：3 次 )

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="/UploadFiles/2021-04-02/vue_2.2.2_vue.min.js">

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全局组件与局部组件的区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：基于jQuery实现的设置文本区域的光标位置
下一篇：react-native android状态栏的实现