Vue3父子通讯方式及Vue3插槽的使用方法详解

让我来给大家详细讲解一下“Vue3父子通讯方式及Vue3插槽的使用方法详解”。

Vue3父子通讯方式

在Vue3中，父组件向子组件传递数据是通过props属性来实现的，子组件接收到数据后，可以通过触发事件将数据传递回父组件。

父组件向子组件传递数据

父组件使用props属性来向子组件传递数据，示例代码如下：

<template>
  <div>
    <child :name="name"></child>
  </div>
</template>

<script>
import child from './components/child.vue'

export default {
  name: "parent",
  components: {
    child
  },
  data() {
    return {
      name: 'Tom'
    }
  }
}
</script>

在父组件中声明name属性，并在<child>组件上使用:name语法将name属性传递给子组件。

子组件在props属性中声明接收的数据类型，示例代码如下：

<template>
  <div>
    My name is {{ name }}
  </div>
</template>

<script>
export default {
  name: "child",
  props: {
    name: String
  }
}
</script>

在子组件中声明接收name属性，并在模板中通过{{ name }}来显示。

子组件向父组件传递数据

子组件可以通过$emit方法触发事件来向父组件传递数据，示例代码如下：

<template>
  <div>
    <button @click="handleClick">传递数据到父组件</button>
  </div>
</template>

<script>
export default {
  name: "child",
  methods: {
    handleClick() {
      this.$emit('customEvent', '这是一条来自子组件的消息')
    }
  }
}
</script>

在子组件中通过$emit方法触发customEvent事件，并传递了一个字符串参数。

父组件可以在子组件上使用v-on指令监听子组件的自定义事件，并定义对应的方法来接收子组件传递的数据，示例代码如下：

<template>
  <div>
    <child @customEvent="handleCustomEvent"></child>
  </div>
</template>

<script>
import child from './components/child.vue'

export default {
  name: "parent",
  components: {
    child
  },
  methods: {
    handleCustomEvent(msg) {
      console.log(msg)
    }
  }
}
</script>

在父组件中使用v-on指令监听子组件的customEvent事件，并通过handleCustomEvent方法接收子组件传递的消息。

Vue3插槽的使用方法

Vue3中，插槽的使用方法与Vue2中有所不同。插槽分为默认插槽和具名插槽两种。

默认插槽的使用

默认插槽没有指定名称，可以直接在组件中使用。

例如，在父组件中定义一个子组件 <child>，并在模板中使用：

<template>
  <div>
    <child>
      <p>这是默认插槽内容</p>
    </child>
  </div>
</template>

<script>
import child from './components/child.vue'

export default {
  name: "parent",
  components: {
    child
  }
}
</script>

在子组件模板中定义默认插槽，示例代码如下：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "child"
}
</script>

在子组件模板中使用 <slot></slot> 定义一个默认插槽，该插槽将渲染所有在组件标签中没有被绑定到具名插槽的内容。

具名插槽的使用

具名插槽是指插槽有一个名称，可以在组件中指定名称来使用。

例如，在父组件中定义一个子组件 <child>，并在模板中使用：

<template>
  <div>
    <child>
      <template #header>
        <p>这是头部内容</p>
      </template>
      <template #footer>
        <p>这是底部内容</p>
      </template>
    </child>
  </div>
</template>

<script>
import child from './components/child.vue'

export default {
  name: "parent",
  components: {
    child
  }
}
</script>

在子组件模板中定义具名插槽，示例代码如下：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="default"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: "child"
}
</script>

在子组件模板中使用 <slot name=""></slot> 定义一个具名插槽，name属性为插槽的名称。在父组件中使用时，可以使用template #name的语法来指定所绑定的插槽的名称。另外还可以使用 v-slot的语法来简化 <template> 的写法。

以上是“Vue3父子通讯方式及Vue3插槽的使用方法详解”的完整攻略，希望对大家的学习有所帮助。