vue.js插槽slot 父组件子组件数据传递

父组件 

<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>