插槽、自定义指令、render函数和过滤器

最新推荐文章于 2025-04-26 11:30:00 发布

恬淡如雪

最新推荐文章于 2025-04-26 11:30:00 发布

阅读量641

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_48639265/article/details/127095555

版权

本文深入探讨了Vue.js中的插槽、自定义指令、render函数及过滤器等高级特性，通过实例展示了这些特性的具体应用方式，帮助开发者更好地掌握Vue.js的进阶用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.插槽

1.1默认插槽/简单插槽

父组件调用子组件提供一个模板

 <div id="app">
        <my-a>我是父组件传递给子组件得模块</my-a>
    </div>
    <script>
        // 定义组件
        let myA = {
            template: `
            <div>
            子组件A
            <slot></slot>    
            </div>
            `
        }
        new Vue({
            components: {
                'my-a': myA
            },
            el: "#app",
        })
    </script>

1.2具名插槽

指定父组件提供子组件的模板渲染到指定插槽

 <div id="app">
        <my-a>
            <div>我是父组件传递给子组件的模块</div>
            <template class="header" #header>头部的内容</template>
            <template class="center" v-slot:center>中间得内容</template>
            <template class="footer" #footer>底部得内容</template>
        </my-a>
    </div>
    <script>
        // 定义组件
        let myA = {
            template: `
            <div>
                <slot></slot>
                <hr>
                <slot name='header'></slot>					
				<slot name='center'></slot>					
			
            </div>
            `
        }
        new Vue({
            components: {
                'my-a': myA
            },
            el: "#app",
        })
    </script>

1.3作用域插槽

子组件传递给父组件，使用插槽，父组件获取插槽传递的值。

<div id="app">
        <my-a :arr="arr">
            <template slot-scope="scope">
                {{scope}}
            </template>
        </my-a>
    </div>
    <script>
        // 定义组件
        let myA = {
            props: ['arr'],
            template: `
            <div>			
                <ul>
					<li v-for='item in arr'>
						<slot :subSmg='subMsg' :row='item'></slot>	
					</li>	
				</ul>	
            </div>
            `,
            data() {
                return {
                    subMsg: '我是子组件'
                }
            }
        }
        new Vue({
            components: {
                'my-a': myA
            },
            el: "#app",
            data: {
                arr: [
                    {
                        id: 1,
                        name: 'a',
                    },
                    {
                        id: 2,
                        name: 'b',
                    },
                    {
                        id: 3,
                        name: 'c',
                    }
                ]
            }
        })
    </script>