Vue编译作用域

最新推荐文章于 2022-04-26 11:34:24 发布

清华小菜

最新推荐文章于 2022-04-26 11:34:24 发布

阅读量292

点赞数 2

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

本文链接：https://blog.csdn.net/C90283/article/details/121216857

版权

笔记专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<body>
  <div id="app">
        1111
      <cpn v-show="isShow"></cpn>   <!--处于Vue实例中，编译时使用Vue中的数据-->
      1111
  </div>

  <template id="cpn">
      <div>
          <h1>子组件</h1>
          <a href="">lianjie</a>
          <button v-show="isShow"></button> <!--处于组件中，使用组件中的数据-->
      </div>
  </template>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                isShow:true,
            },
            components:{
                cpn:{
                    template:"#cpn",
                    data(){
                        return{
                            isShow:false
                        }
                    }
                }
            }
        })
    </script>
</body>

作用域插槽的使用：

<body>
    <div id="app">
        <cpn></cpn>
         <cpn>
            <template slot-scope="slot1">    <!--目的是获得子组件的数据pLanguages，slot1为获得的数据命名-->
                <span>{{slot1.data.join('~')}}</span>
            </template>
        </cpn>
        <cpn>
            <template slot-scope="slot1">
                <span v-for="item in slot1.data">{{item}}*</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>
        const app=new Vue({
            el:"#app",
            components:{
                cpn:{
                    template:"#cpn",
                    data(){
                        return{
                            pLanguages:['js','c++','py']
                        }
                    }
                }
            }
        })
    </script>
</body>

清华小菜

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue编译作用域

<body> <div id="app"> 1111 <cpn v-show="isShow"></cpn>  1111 </div> <template id="cpn"> <div> <h1>子组件</h1> <a
复制链接

扫一扫

专栏目录