v-slot语法的详细用法

v-slot语法的详细用法

一、具名插槽
老的写法（子组件child）

<template>
    <div id='child'>
        <p>----我是子组件---</p>
        <slot name="header"></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>
export default {
    name: 'child',
    data(){
        return {
            
        }
    },
    methods: {

    }
}
</script>

<style scoped>

</style>

父组件（App老的写法）：

<template>
  <div id="app">
    <p>我是父组件</p>
    <!--子组件child-->
    <child>
      <div slot="footer">我是父组件插槽footer的内容</div>
      <div slot="header">我是父组件插槽header的内容</div>
    </child>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  name: 'App',
  data() {
    return {
    }
  },
  components: {
    child
  }
}
</script>

<style>

</style>

具名插槽子组件的写法不改变
父组件新的写法（App）:

<template>
  <div id="app">
    <p>我是父组件</p>
    <!--子组件child-->
    <child>
      <template v-slot:footer>
        <div>我是父组件插槽的footer内容</div>
      </template>
      <template v-slot:header>
        <div>我是父组件插槽的header内容</div>
      </template>
    </child>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  name: 'App',
  data() {
    return {
    }
  },
  components: {
    child
  }
}
</script>

<style>

</style>

二、作用域插槽
子组件老的写法（child）

<template>
    <div id='child'>
        <p>----我是子组件---</p>
        <slot :user="user" test='测试'></slot>
    </div>
</template>

<script>
export default {
    name: 'child',
    data(){
        return {
            user: {name: 'Tom', age: 20}
        }
    },
    methods: {

    }
}
</script>

<style scoped>

</style>

父组件老的写法（App组件）：

<template>
  <div id="app">
    <p>我是父组件</p>
    <!--子组件child-->
    <child>
      <template slot-scope="data">
        <p>{{data.user}}</p>
        <p>{{data.test}}</p>
      </template>
    </child>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  name: 'App',
  data() {
    return {
    }
  },
  components: {
    child
  }
}
</script>

<style>

</style>

显示效果：

新的写法子组件不变，父组件需要进行变化：
父组件新的写法：

<template>
  <div id="app">
    <p>我是父组件</p>
    <!--子组件child-->
    <child>
      <template v-slot:header="data">
        <div>{{data.user}}</div>
        <div>{{data.test}}</div>
      </template>
    </child>
  </div>
</template>

<script>
import child from './components/child.vue'
export default {
  name: 'App',
  data() {
    return {
    }
  },
  components: {
    child
  }
}
</script>

<style>

</style>

v-slot只能写在template和自定义标签中，v-slot:header=“data”，这一句首先是让该标签渲染到name属性为（header）的slot标签上，然后data就是保存的整个子组件在slo上的属性
可以理解为：

data: {
	user: {
		name: "Tom",
		age: 20
	},
	test: "测试"
}