Vue實(shí)現(xiàn)多層組件嵌套的方法有哪些

發(fā)布時(shí)間：2021-07-06 14:29:42 來(lái)源：億速云閱讀：219 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下Vue實(shí)現(xiàn)多層組件嵌套的方法有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

實(shí)例如下：

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>Vue 測(cè)試實(shí)例-組件嵌套二種方式</title>
 <script src="//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>

看完了這篇文章，相信你對(duì)“Vue實(shí)現(xiàn)多層組件嵌套的方法有哪些”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

Vue實(shí)現(xiàn)多層組件嵌套的方法有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽