Vue组件插槽,vuex

96 阅读1分钟

插槽传值

 创建组件插槽传值
    <template>
      <div>
          <slot name='cca' :ccav='msga' ></slot>    
          <h1>AAA</h1>
          <slot name="ccb" :ccbv='msgb' ></slot>    
      </div>
    </template>

     <script>
            export default {
                data(){
                    return {
                        msga:'我是msg1',
                        msgb:'我是msg2',
                    }
                }
            }
     </script>
           接收并使用组件插槽
             <template>
                  <div id="app">
                  <h1>APP页面</h1>
                  <sa>
                     slot-scope
        vue2.5及之前的版本使用 slot-scope 属性来接收插槽传过来的,
        属性值为任意名对象,传过来的值存在对象中。
                    <h1  slot="cca" slot-scope="scope">我是1--{{scope.ccav}}</h1>
                    
                        v-slot
        vue2.6及之后的版本使用 v-slot 取代了 slot-scope,想要插入
        插槽内容需用template标签包裹,具名插槽用法:使用 v-slot:插
        槽name值="scope" 取代name="s2",匿名插槽用法:v-slot="scope"
        ,scope 值为对象 可以接收插槽传的值。
                    <template v-slot:ccb='scope'>
                      <div>
                       <h1> 我是2--{{scope.ccbv}}</h1>
                      </div>
                    </template>
                  </sa>
             </template>
                <script>
                import sa  from './components/ZujianA.vue'
                import ss  from './components/ZujianB.vue'
                export default {
                  components:{
                    sa,
                    ss,
                  },
                }
                

vueX初识

image.png store里的index.js image.png