Vue.js之组件插槽的使用

1.基本使用

2.具名使用

（1）.单个标签的指定

（2）.多个标签的指定

3.父组件操纵子组件的内容

本文主要介绍Vue.js中组件插槽的使用，包括基本使用、具名使用以及父组件操纵子组件的内容。

1.基本使用

（1）.在子组件插槽中填写的内容对应的就是子组件模板内的slot标签；

（2）.子组件插槽中若没有内容，同时slot内有内容，默认会显示slot中的内容


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .test {
            border: 2px solid red;
            width: 100px;
            padding: 20px;
        }
    style>
head>
 
<body>
    <div id="app">
        <test class="test">插槽的内容test>
        <test class="test">test>
    div>
    <script src="./vue.min.js">script>
    <script>
        Vue.component('test', {
            data: function() {
                return {}
            },
            template: `
                默认内容
                
`

});
let vu = new Vue({
el: '#app'
})
script>
body>
html>

2.具名使用

上面基本的使用中，slot是文本内容，并不是标签。具名使用则会进行匹配，从而使得slot显示指定的标签内容。

（1）.单个标签的指定

需要在子组件使用时为标签添加slot属性并取一定的值，之后在子组件模板中的slot标签中添加name并赋值之前slot的属性值即可。

（2）.多个标签的指定

通过template标签指定，匹配方法同上


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .test {
            border: 2px solid red;
            width: 100px;
        }
    style>
head>
 
<body>
    <div id="app">
        <test class="test">
            
            <p slot="t1">标题信息p>
            <p slot="t2">底部信息p>
            <section>无匹配section>
            <template slot="t3">
                <p>ap>
                <p>bp>
                <p>cp>
                <p>dp>
            template>
        test>
    div>
    <script src="./vue.min.js">script>
    <script>
        Vue.component('test', {
            data: function() {
                return {
                    count: 0,
                    num: 100
                }
            },
            template: `
            <div>
                <slot name='t1'>slot>
                <slot name='t2'>slot>
                <slot>slot>
                <slot name='t3'>slot>
                <div v-text="count">div>
                <button @click="count+=num">点击button>
            div>`
        });
        let vu = new Vue({
            el: '#app',
            data: {},
            methods: {}
        })
    script>
body>
 
html>

3.父组件操纵子组件的内容

（1）子组件的模板中添加slot并绑定列表元素


 template: `

<fruit-list :flist="list"> <template slot-scope="slotProps"> <strong class="orange" v-if="slotProps.i.id==2" >{{slotProps.i.name}}strong> <span v-else >{{slotProps.i.name}}span> template> fruit-list>

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .orange { color: orange; font-size: 40px; } style> head> <body> <div id="app"> <fruit-list :flist="list"> <template slot-scope="slotProps"> <strong class="orange" v-if="slotProps.i.id==2" >{{slotProps.i.name}}strong> <span v-else >{{slotProps.i.name}}span> template> fruit-list> div> <script src="./vue.min.js"> script> <script> Vue.component('fruit-list', { props: ['flist'], data: function() { return {} }, template: ` ` }) let vu = new Vue({ el: "#app", data: { list: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'pear' }] } }) script> body> html>

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .orange { color: orange; font-size: 40px; } style> head> <body> <div id="app"> <fruit-list :flist="list"> fruit-list> div> <script src="./vue.min.js"> script> <script> Vue.component('fruit-list', { props: ['flist'], data: function() { return {} }, template: ` <ul> <li v-for="item in flist" :key="item.id"> <strong class="orange" v-text="item.name" v-if="item.id==2">strong> <span v-text="item.name" v-else>span> li> ul> ` }) let vu = new Vue({ el: "#app", data: { list: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'pear' }] } }) script> body> html>