vue.js插槽slot 父组件子组件数据传递
父组件<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform"><div><ul><!--父组件的Child标签中,使用:itemValue绑定了数据,传递到子组件中使用--><Child v-for="item in it...
·
父组件
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div>
<ul>
<!-- 父组件的Child标签中,使用:itemValue绑定了数据,传递到子组件中使用-->
<Child v-for="item in items" :key="item" :itemValue="item">
<!-- v-slot:vue260是vue.js2.6.0版本的写法-->
<!-- 父组件中的itemProps为子组件传递回来的对象,使用itemProps.xxx可以获得值-->
<template v-slot:vue260="itemProps">
<span :style="{color: itemProps.checked == true ? 'red' : 'blue'}">{{ item }}</span>
<!-- slot="vue260"是vue.js2.6.0之前版本的写法-->
<!-- <span slot="vue260" slot-scope="itemProps" :style="{color: itemProps.head == true ? 'red' : 'blue'}">{{ item }}</span>-->
</template>
</Child>
</ul>
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'Parent',
components: { Child },
data () {
return {
items: ['我是第一个元素', '我是第二个元素']
}
},
methods: {
}
}
</script>
<style scoped>
</style>
子组件
<template>
<li>
<input type="checkbox" v-model="checked" :value="itemValue" @change="onClick"></input>
<!-- 插槽里使用v-bind将数据传递回父组件,三种写法都可以-->
<!-- <slot name="vue260" :checked="checked" ></slot>-->
<!-- <slot name="vue260" v-bind:checked="checked"></slot>-->
<slot name="vue260" v-bind="{checked: checked, head: checked}" ></slot>
<button @click="onClick">点击我</button>
</li>
</template>
<script>
export default {
name: 'Child',
props: {
// 父组件的Child标签中,使用:itemValue绑定了数据,传递到子组件中使用
itemValue: String
},
data () {
return {
checked: false
}
},
methods: {
onClick (e) {
console.log(e)
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)