插槽传值
创建组件插槽传值
<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初识
store里的index.js