澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-07-28 12:24 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

Vue组件之全局组件与局部组件的使用详解,深入

1、组件注明

组件 (Component) 是 Vue.js 最精锐的效用之一。组件能够扩张 HTML 元素,封装可选择的代码。在较高层面上,组件是自定义成分,Vue.js 的编写翻译器为它助长特殊功用。在有一点点情状下,组件也得以是原生 HTML 成分的款式,以is性情扩大。个人以为正是一个足以另行利用的结构层代码片段。

一、介绍

<!-- 全局组件模板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" 
     } 
   } 
 }; 

大局组件注册格局:Vue.component(组件名,{方法})

       组件系统是Vue.js当中一个生死攸关的概念,它提供了一种浮泛,让大家能够运用独立可复用的小组件来创设大型应用,大肆档案的次序的运用分界面都足以抽象为贰个零部件树

2、组件注册

eg:

威尼斯人网上投注 1

Vue.component('father', FATHER); 
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
  <my-component></my-component>

</div>
<script>
Vue.component("my-component",{
  template:"<h1>我是全局组件</h1>"
});
new Vue({
  el:"#app"
});
new Vue({
  el:"#app1"
})
</script>
</body>

 那么哪些是组件呢?

3、组件挂载

渲染结果:

  组件能够扩张HTML成分,封装可选拔的HTML代码,我们得以将零件看作自定义的HTML成分。

<h5>全局组件1</h5> 
<father></father> 
<div id="app">
  <h1>我是全局组件</h1>
</div>
<div id="app1">
  <h1>我是全局组件</h1>
</div>

二、怎么着注册组件

4、组件实例

那边供给专注:

   Vue.js的零件的利用有3个步骤:成立组件构造器、注册组件和选用组件。

<!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> 

威尼斯人网上投注,1.全局组件必须写在Vue实例创立之前,才在该根成分下面生效;

威尼斯人网上投注 2

6、特殊的性质is

eg:

 上面用代码演示那三步

当使用 DOM 作为模板时 (比方,将el选项挂载到一个已存在的要素上),你会境遇HTML 的有的范围,因为 Vue 独有在浏览器分析和条件 HTML 后工夫赢得模板内容。非常像那么些要素<ul>,<ol>,<table>,<select>限制了能被它包裹的因素,而一些像<option>那样的要素只好现身在少数别的成分内部。

<body>
<div id="app">
  <my-component></my-component>
</div>
<div id="app1">
  <my-component></my-component>

</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>
<!DOCTYPE html>
<html>
 <body>
  <div id="app">
   <!-- 注意: #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
   <my-component></my-component>
  </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  <!-- 1.创建一个组件构造器 -->
  var myComponent = Vue.extend({
   template: '<div>This is my first component!</div>'
  })

  <!-- 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component> -->
  Vue.component('my-component', myComponent)

  <!-- 3.通过id=app进行挂载 -->
  new Vue({
   el: '#app'
  });

 </script>
</html>

自定义组件<my-row>被以为是没用的剧情,因而在渲染的时候会促成错误。变通的方案是运用特殊的is属性:

那般只会渲染app1根元素下边包车型客车,并不会渲染app根成分上面包车型大巴,而且会报错。

    运转结果如下:

<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> 

2.模板里面第一流只可以有三个标签,不能相互;

威尼斯人网上投注 3

总结

<body>
<div id="app">
  <my-component></my-component>
</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>"  
    "<p>我是全局组件内标签</p>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

   一、 全局注册和部分注册

如上所述是小编给大家介绍的Vue全局组件与一些组件的区分,希望对大家持有支持,倘若大家有其余疑问请给自个儿留言,小编会及时回复大家的。在此也特别感激大家对台本之家网址的支撑!

如此那般子会报错,况兼只会渲染第三个标签h1;大家相应那样子写:

       调用Vue.component()注册组件时,组件的挂号是全局的,那象征该器件能够在放肆Vue示例下使用。
一经不须要全局注册,只怕是让组件使用在别的组件内,能够用选项对象的components属性完成部分注册。

你或者感兴趣的篇章:

  • vue全局组件与部分组件使用办法详解
  • Vue组件之全局组件与部分组件的应用详解
  • 详解vue.js全局组件和局地组件
  • vue2.0大局组件之pdf详解
  • 自定义vue全局组件use使用、vuex的使用详解
  • 详解Vue.use自定义自个儿的全局组件
<body>
<div id="app">
  <my-component></my-component>
</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件<p>"  
    "我是全局组件内标签</p></h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

 笔者要好的敞亮只假使component就象征全局组件,components代表有个别组件

一些组件注册情势,直接在Vue实例之中注册

    上边的演示能够改为部分注册的章程:

eg:

<!DOCTYPE html>
<html>
 <body>
  <div id="app">
   <!-- 3. my-component只能在#app下使用-->
   <my-component></my-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  // 1.创建一个组件构造器
  var myComponent = Vue.extend({
   template: '<div>This is my first component!</div>'
  })

  new Vue({
   el: '#app',
   components: {
   // 2. 将myComponent组件注册到Vue实例下
    'my-component' : myComponent
   }
  });
 </script>
</html>
<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  new Vue({
    el: "#app1",
    components:{
      "child-component":{
        template:"<h1>我是局部组件</h1>"
      }
    }
  });
</script>

       由于my-component组件是登记在#app成分对应的Vue实例下的,所以它无法在任何Vue实例下利用。

局部组件要求注意:

<div id="app2">
 <!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
 <my-component></my-component>
</div>

<script>
 new Vue({
  el: '#app2'
 });
</script>

1.属性名字为components,s千万别忘了;

 二、组件注册语法糖

2.套路相比较深,所以建议模板定义在一个全局变量里,代码看起来轻松一点,如下:(模板标签比较多的时候,那样子写越发简洁规整)

    以上组件注册的法门有些麻烦,Vue.js为了简化那个历程,提供了注册语法糖

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  var child={
    template:"<h1>我是局部组件</h1>"
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  });
</script>
</body>
// 全局注册,my-component1是标签名称
Vue.component('my-component1',{
 template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
 el: '#app1'
})

至于组件中的别的质量,能够和实例中的同样,然则data属性必须是二个函数:

       Vue.component()的第四个参数是标签名称,第四个参数是叁个选用对象,使用选拔对象的template属性定义组件模板。
动用这种艺术,Vue在私行会自行地调用Vue.extend()。

eg:

   components完毕部分注册

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:Vue组件之全局组件与局部组件的使用详解,深入

关键词: 澳门威利斯人