vue父子元件slot插槽的使用

2022-08-05 18:00:03

vue父子元件slot插槽

關於父元件在使用子元件的時候，向子元件插入內容的方法

1.建立一個子元件並在vue範例中註冊

這是建立子元件

var testzujian = {
        template:`<div>
            <span>這是子元件的內容</span>   
            </div>`
    }

這是註冊子元件

let vm = new Vue({
    el:'.root',
     components:{
            testzujian:testzujian
        },
})

2.在HTML程式碼中使用子元件

<body>
    <div class="root">
        <testzujian></testzujian>    
    </div>
</body>

3.在vue範例中寫入想要插入到子元件的內容

let vm = new Vue({
        el:'.root',
        components:{
            testzujian:testzujian
        },
        template:`<div>
            <testzujian>
                <template v-slot:slotcontent>
                    <span>這是父元件向子元件插入的內容</span>    
                </template> 
            </testzujian>
            </div>`,
    })

其中template是一個模板字串，這個模板字串裡面最外面的div標籤是根目錄，必須存在。

根目錄之下的是已經註冊的子元件，也是需要加內容的子元件標籤，必須存在

子元件標籤之內的也是必須存在的

其上的屬性v-slot繫結了一個名字slotcontent，這個名字可以隨意取，但必須得有

這個標籤裡面就用來新增

父元件想要插入子元件的內容

4.在子元件的模板中通過一個slot標籤

來引入父元件模板中內新增的內容

var testzujian = {
        template:`<div>
            <span>這是子元件的內容</span>
            <slot name="slotcontent">
            </slot>    
            </div>`
    }

這是剛才建立好的子元件，現在在其template的模板中，加入了一個slot標籤，屬性name繫結為剛才中v-slot：繫結的名字，也就是slotcontent

vue插槽v-slot實現父向子傳值

// 子元件程式碼
<template>
  <div class="child">
    <h4>this is child component</h4>
    <p>收到來自父元件的訊息：
      <slot name="child"></slot>  <!--展示父元件通過插槽傳遞的{{message}}-->
    </p>
  </div>
</template>

//父元件程式碼
<template>
  <div class="parent">
    <h3>this is parent component</h3>
    <input type="text" v-model="message" />
    <Child>
      <template v-slot:child>
        {{ message }}  <!--插槽要展示的內容-->
      </template>
    </Child>
  </div>
</template>

<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '內容',
    }
  },
  components: {
    Child,
  },
}
</script>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。