Vue中的作用域插槽slot-scoped的详细用法

Vue中的作用域插槽slot-scoped的详细用法

插槽是什么：意思是子组件有一个标签slot，就是一个占位符，然后在父组件中调用这个子组件，在子组件标签中填写HTML模块，会自动显示在子组件中的slot占位标签处。

例子：
子组件（child组件）：

<template>
    <div id='child'>
        <p>----我是子组件---</p>
        <slot></slot> <!--这里是一个占位符，父组件调用子组件标签中的内容将显示在这里-->
    </div>
</template>

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

    }
}
</script>

<style scoped>

</style>

父组件（App）：

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

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

<style>

</style>

显示的效果：

作用域插槽：在父组件中的插槽内容中能够访问子组件的数据

需求：我想在父组件的插槽内容中访问子组件data的数据。
子组件（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>

显示的效果：

slot-scope只能使用在template作者自定义的组件上，否则会报错。

slot-scope=“data” 这里的data保存的就是在子组件中slot标签中的所有属性（class、style属性除外）。
可以理解为：data就是一个对象了,data的组成可以理解为以下结构：

data: {
	use: {
		name: 'Tom',
		age: 20
	},
	test: '测试'
}

如果需要修改子组件中的数据可以通过在子组件标签上绑定ref属性，然后通过this.$refs.XXXX进行修改。