05-vue-1-组件插槽

最新推荐文章于 2023-06-22 21:26:04 发布

Y__C__X

最新推荐文章于 2023-06-22 21:26:04 发布

阅读量816

点赞数

分类专栏： Vue 文章标签： vue 组件化

本文链接：https://blog.csdn.net/weixin_41197830/article/details/118934125

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title </title>

    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    正常情况下,组件标签内是不能插入内容的，即使插入了，也不会有任何效果-->
    <ycx>
        <!--组件里的内容是根据slot插槽进行插入的-->
        <!--如果不做任何处理,默认组件里的内容会插入到name值为default的插槽中-->
<!--v-slot:name 指定插入某个插槽中 插槽在子组件中定义-->
<!--插槽只能使用template标签来插入-->
        <template v-slot:before>
<!--在父组件 app 作用域内 可以访问父组件中的任何data属性-->
            {{msg}}
        </template>
        <template v-slot:after>
        <h1>这是一个标题</h1>
        </template>
    </ycx>
</div>
<script id="temp" type="text/html">
    <div>
<!--        slot如果没有指定name值 那么默认值为default-->
<!--具名插槽(带名字)-->
        <slot name="before"></slot>
        这是子组件ycx中的内容
<!--        slot 组件里的插槽:作用:适用于在 父组件中，如果需要往子组件里写入内容时,就需要指定插槽-->
        <slot name="after"></slot>
    </div>
</script>
<script>
    Vue.component('ycx', {
        template: '#temp'
    })

    new Vue({
        el: "#app",
        data: {
            msg:"这是父组件里的内容"
        }
    })
</script>
</body>
</html>

总结:后续补充总结

Y__C__X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-vue-1-组件插槽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title </title> <script src="js/vue.js"></script></head><body><div id="app"><!-- 正常情况下,组件标签内是不能插入.
复制链接

扫一扫