在Vue中如何创建组件-tutorial js-php.cn

在Vue中如何创建组件

亚连

Lepaskan： 2018-06-05 09:45:41

asal

2400 orang telah melayarinya

Vue 创建组件的方法有哪些呢？下面我就为大家分享一篇Vue 创建组件的两种方法小结，具有很好的参考价值，希望对大家有所帮助。

创建组件的两种方法小结

1.全局注册

2.局部注册

var child=Vue.extend({})
var parent=Vue.extend({})

Salin selepas log masuk

Vue.extend() 全局方法生成构造器，创建子类

使用基础 Vue 构造器，创建一个“子类”。

这样写非常繁琐。于是vue进行了简化

使用Vue.component()直接创建和注册组件：

Vue.component(id,options) 全局方法用来注册全局组件

id 是string类型，即是注册组件的名称

options 是个对象

// 全局注册，my-component1是标签名称
Vue.component(&#39;my-component1&#39;,{
 template: &#39;<p>This is the first component!</p>&#39;
})
var vm1 = new Vue({
 el: &#39;#app1&#39;
})

Salin selepas log masuk

Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。

使用这种方式，Vue在背后会自动地调用Vue.extend()。

在选项对象的components属性中实现局部注册：

var vm2 = new Vue({
 el: &#39;#app2&#39;,
 components: {
  // 局部注册，my-component2是标签名称
  &#39;my-component2&#39;: {
   template: &#39;<p>This is the second component!</p>&#39;
  },
  // 局部注册，my-component3是标签名称
  &#39;my-component3&#39;: {
   template: &#39;<p>This is the third component!</p>&#39;
  }
 }
})

Salin selepas log masuk

==局部注册都放在选项对象中创建==

注意：这里是components，里面可以定义多个组件。

简化后是这样的写法

<body>
 <p id=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </script>
</body>

Salin selepas log masuk

注册一个parent的父组件。然后在父组件的选项对象中注册一个child的子组件。将子组件child的标签写到父组件parent的template里面。

页面上的样式结构就是

<p>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</p>

Salin selepas log masuk

注意：用局部注册的子组件不能单独直接使用！

标签挂在p里，会报错

<p id=&#39;box&#39;>  
 <child></child>
</p>

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

在angular中基于ng-alain如何定义自己的select组件？

在vue中如何实现watch监听对象及对应值的变化

如何解决Vue不能检测数组或对象变动方面问题？

Atas ialah kandungan terperinci 在Vue中如何创建组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

在Vue中如何创建组件