1.12笔记插槽

最新推荐文章于 2024-09-06 22:20:29 发布

九今

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量150

点赞数

分类专栏：笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_51603531/article/details/122456534

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

父子组件访问

父访问子

1.this.$children 返回数组

2.this.$refs 返回对象（默认空对象）

<cpn ref='名称'></cpn>

this.$refs.名称

子访问父

1.this.$parent

2.this.$root：访问根组件

插槽slot

1.基本使用:
2.默认值：
3.如果有多个值同时放入组件进行替换，这多个值一起作为替换元素

<body>
    <div id="app">
        <cpn><button>按钮</button></cpn>
        <cpn><i>呵呵</i></cpn>
    </div>
    <template id='cpn'>
        <div>
            <h2>我是组件</h2>
            <p>我是组件哈哈哈哈</p>
            <slot></slot>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn: {
                    template: '#cpn',

                }
            }
        })
    </script>
</body>

在这里插入图片描述
具名插槽
给插槽取名字，替换时只替换没有名字的，如果想替换有名字的，需要在用来替换的标签中加slot=“名字”

<body>
    <div id="app">
        <cpn><span>标题</span></cpn>
        <cpn><span slot="center">标题</span></cpn>
    </div>

    <template id="cpn">
        <div>
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
            <slot>hhh</slot>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn: {
                    template: '#cpn',

                }
            }
        })
    </script>
</body>

在这里插入图片描述
作用域插槽
编译作用域：
用v-show,v-for等使用变量时，会看这个变量是在哪个模板里，不会看是在哪个组件
作用域插槽：父组件替换插槽里的标签，但是内容由子组件来提供

<body>
    <div id="app">
        <cpn></cpn>
        <cpn>
            <template slot-scope="slot">
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template v-slot="slot">
                <span>{{slot.data.join("*")}}</span>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot :data='Planguages'>
                <ul>
                    <li v-for='item in Planguages'>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            Planguages: ['JavaScript', 'c++', 'java', 'c#', 'python']
                        }
                    }
                }
            }
        })
    </script>
</body>

在这里插入图片描述

九今

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.12笔记插槽

父子组件访问父访问子1.this.children返回数组2.this.children 返回数组2.this.children返回数组2.this.refs 返回对象（默认空对象）<cpn ref='名称'></cpn>this.$refs.名称子访问父1.this.parent2.this.parent2.this.parent2.this.root插槽slot...
复制链接

扫一扫

专栏目录