Vue 多層組件嵌套二種實(shí)現(xiàn)方式(測(cè)試實(shí)例)

更新時(shí)間：2017年09月08日 09:16:31 作者：itpinpai

本篇文章主要介紹了Vue組件嵌套二種實(shí)現(xiàn)方式(測(cè)試實(shí)例)，具有一定的參考價(jià)值，代碼很簡(jiǎn)單，感興趣的小伙伴們可以參考一下

最近在研究vue組件的學(xué)習(xí)，給自己留個(gè)筆記，也分享給大家，希望能對(duì)大家有所幫助

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>Vue 測(cè)試實(shí)例-組件嵌套二種方式</title>
 <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>

<body>
 <div id="app">
  <Itemlist1>
    <Item v-for="item in items1" :data="item"/>
  </Itemlist1>

  <Itemlist2 :itemlist="items2"></Itemlist2>
 </div>
 <script>

 Vue.component('Item',{
  template: '<div>{{data.name}}</div>',
  props: {
    data:Object
  }

 });
 // 方式一：嵌套組件時(shí)用<slot></slot>,
 Vue.component("Itemlist1", {
  template: '<div @click="ok"><slot></slot></div>',
  props: {
   itemList: Array
  },
  methods: {
   ok: function() {
    alert(this.abc);
   }
  }
 });

 // 方式二：
 Vue.component("Itemlist2", {
  template: '<div @click="ok"><Item v-for="item in itemlist" :data="item"/></div>',
  props: {
   itemlist: Array
  },
  methods: {
   ok: function() {
    alert(this.abc);
   }
  }
 });

 // 創(chuàng)建根實(shí)例
 var vueApp = new Vue({
  el: '#app',
  data: {
   items1: [{
    'name': "item1"
   }, {
    'name': "item2"
   }, {
    'name': "item3"
   }],
   items2: [{
    'name': "item1-1"
   }, {
    'name': "item2-1"
   }, {
    'name': "item3-1"
   }]
  }
 })
 </script>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue路由第二次進(jìn)入頁(yè)面created和mounted不執(zhí)行問(wèn)題及解決
這篇文章主要介紹了vue路由第二次進(jìn)入頁(yè)面created和mounted不執(zhí)行問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
基于vue的tab-list類(lèi)目切換商品列表組件的示例代碼
這篇文章主要介紹了基于vue的tab-list類(lèi)目切換商品列表組件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
詳解vue3沙箱機(jī)制
這篇文章主要介紹了詳解vue3 沙箱機(jī)制，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-03-03
Vue3通用API功能示例剖析
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
如何用vue封裝axios請(qǐng)求
對(duì)axios進(jìn)行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡(jiǎn)化代碼，方便后期維護(hù)。本文介紹了如何用vue封裝axios請(qǐng)求，感興趣的同學(xué)，可以參考下。
2021-06-06
VUE項(xiàng)目中加載已保存的筆記實(shí)例方法
在本篇文章里小編給大家整理了一篇關(guān)于VUE項(xiàng)目中加載已保存的筆記實(shí)例方法，有興趣的讀者們可以參考下。
2019-09-09
vscode vue 文件模板的配置方法
這篇文章主要介紹了vscode vue 文件模板的配置方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
Vue應(yīng)用中504錯(cuò)誤（Gateway timeout）的原因與解決方法
在Vue前端應(yīng)用中遇到504代理錯(cuò)誤通常是由于請(qǐng)求在到達(dá)服務(wù)器之前超時(shí),504錯(cuò)誤表示網(wǎng)關(guān)超時(shí),可能由后端服務(wù)響應(yīng)慢、網(wǎng)絡(luò)問(wèn)題、代理配置錯(cuò)誤、請(qǐng)求負(fù)載過(guò)大、前端請(qǐng)求超時(shí)設(shè)置不當(dāng)、服務(wù)器資源不足或第三方服務(wù)問(wèn)題引起
2024-09-09