Vue3父子组件值传递(一)

Vue3父子组件值传递(一)

本节我们来学习Vue3父子组件之间的数据传递 - 单向数据传递，这一节包括：

• 父组件传递数据到子组件

• 子组件传递数据到父组件

• 父子组件相互之间的数据单向传递

本节内容的前提是在父子组件传递数据的过程中，没有对传递的数据进行修改。

1.父组件传递数据到子组件

父组件传递数据到子组件的过程如下：

 

也就是说，父组件需要将值传递给子组件的属性即可实现。

子组件写法：

<template>
  <div>
    {{ 属性 }}
  </div>
</template>
​
<script>
import {defineComponent} from "vue"
​
export default defineComponent({
  name: "组件名",
  props: {
    属性: {
      type: 类型
    }
  }
})
</script>

父组件写法：

<template>
  ......
  <sub-unit1 :属性="变量"></sub-unit1>
</template>
​
<script>
import {ref, defineComponent} from "vue"
import 子组件名 from "@/components/组件文件名"
​
export default defineComponent({
  name: "组件名",
  components: {
      子组件名
  },
  setup () {
    let 变量 = ref(null)
​
    return {变量}
  }
})
</script>

示例：父组件传递一个用户输入的数据到子组件中显示

子组件代码：

<template>
  <div class="box">
    <div>子组件</div>
    <div>
      {{ context }}
    </div>
  </div>
</template>
​
<script>
import {defineComponent} from "vue"
​
export default defineComponent({
  name: "SubUnit1",
  props: {
    context: {
      type: String
    }
  }
})
</script>
​
<style scoped>
.box {
  height: 60px;
  margin-top: 24px;
  margin-left: 300px;
  margin-right: 300px;
  border: 1px solid #000000;
  text-align: center;
}
</style>

父组件代码：

<template>
  <h3>父组件传递数据到子组件</h3>
  <input type="text" v-model="parentContent">
  <sub-unit1 :context="parentContent"></sub-unit1>
</template>
​
<script>
import {ref, defineComponent} from "vue"
import SubUnit1 from "@/components/SubUnit1"
​
export default defineComponent({
  name: "Transmit1View",
  components: {SubUnit1},
  setup () {
    let parentContent = ref(null)
​
    return {parentContent}
  }
})
</script>
​
<style scoped>
​
</style>

实现效果：

 

2.子组件传递数据到父组件

子组件传递数据给父组件的过程如下：

 

也就是说，子组件通过触发父组件定义的事件来传递数据

子组件写法：

<template>
  ......
  <... @事件="事件函数"/>
  ......
</template>
​
<script>
import {defineComponent} from "vue"
​
export default defineComponent({
  name: "子组件名",
  emits: ["emit事件名"],
​
  setup (props, context) {
    ......
    function 事件函数 () {
      context.emit("emit事件名", [emit参数])
    }
​
    return {事件}
  }
})
</script>

父组件写法：

<template>
  ......
  <子组件 @emit事件名="事件函数"></SubUnit2>
</template>
​
<script>
import {ref, defineComponent} from "vue"
import 子组件名 from "@/components/子组件文件名"
​
export default defineComponent({
  name: "父组件名",
  components: {子组件名},
  setup () {
    ......
​
    function 事件函数 (事件参数) {
      ......
    }
​
    return {事件函数}
  }
})
</script>

父组件中的事件参数就是子组件中emit时传递的 emit 参数。

示例：子组件传递一个用户输入的数据到父组件中显示

子组件代码：

<template>
  <div class="box">
    <div>子组件</div>
    <input type="text" v-model="sub_content">
    <button type="button" @click="ok_button_clicked">Ok</button>
  </div>
</template>
​
<script>
import {ref, defineComponent} from "vue"
​
export default defineComponent({
  name: "SubUnit2",
  emits: ["call_back"],
​
  setup (props, context) {
    let sub_content = ref(null)
​
    function ok_button_clicked () {
      context.emit("call_back", sub_content.value)
    }
​
    return {sub_content, ok_button_clicked}
  }
})
</script>
​
<style scoped>
.box {
  height: 60px;
  margin-top: 24px;
  margin-left: 300px;
  margin-right: 300px;
  border: 1px solid #000000;
  text-align: center;
}
</style>

父组件代码：

<template>
  <h3>子组件传递数据到父组件</h3>
  <div> {{ parent_content }} </div>
  <SubUnit2 @call_back="on_call_back"></SubUnit2>
</template>
​
<script>
import {ref, defineComponent} from "vue"
import SubUnit2 from "@/components/SubUnit2"
​
export default defineComponent({
  name: "Transmit2View",
  components: {SubUnit2},
  setup () {
    let parent_content = ref(null)
​
    function on_call_back (content) {
      parent_content.value = content
    }
​
    return {parent_content, on_call_back}
  }
})
</script>
​
<style scoped>
​
</style>

实现效果：

 

3.父子组件相互之间的数据单向传递

父子组件之间数据单向传递的过程如下：

 

将上面的两种写法组合在一起即可实现父子组件之间的相互传递数据，但不改变传递的数据。

示例：父组件传递一个用户输入的数据到子组件中显示，子组件传递一个用户输入的数据到父组件中显示

子组件代码：

<template>
  <div class="box">
    <div>子组件</div>
    <div>父组件传递的数据</div>
    <div> {{ parent_transmit }} </div>
    <div>子组件中输入数据</div>
    <input type="text" v-model="sub_content">
    <button type="button" @click="ok_button_clicked">Ok</button>
  </div>
</template>
​
<script>
import {ref, defineComponent} from "vue"
​
export default defineComponent({
  name: "SubUnit3",
  props: {
    parent_transmit: {
      type: String
    }
  },
  emits: ["call_back"],
​
  setup (props, context) {
    let sub_content = ref(null)
​
    function ok_button_clicked () {
      context.emit("call_back", sub_content.value)
    }
​
    return {sub_content, ok_button_clicked}
  }
})
</script>
​
<style scoped>
.box {
  height: 110px;
  margin-top: 24px;
  margin-left: 300px;
  margin-right: 300px;
  border: 1px solid #000000;
  text-align: center;
}
</style>

父组件代码：

<template>
  <h3>父子组件相互之间的数据单向传递</h3>
​
  <div>父组件中输入的数据</div>
  <input type="text" v-model="parent_input_content">
​
  <div>父组件中接收的子组件数据</div>
  <div> {{ parent_show_content }} </div>
​
  <SubUnit3 :parent_transmit="parent_input_content" @call_back="on_call_back"></SubUnit3>
</template>
​
<script>
import {ref, defineComponent} from "vue"
import SubUnit3 from "@/components/SubUnit3"
​
export default defineComponent({
  name: "Transmit2View",
  components: {SubUnit3},
  setup () {
    let parent_input_content = ref(null)
    let parent_show_content = ref(null)
​
    function on_call_back (content) {
      parent_show_content.value = content
    }
​
    return {parent_input_content, parent_show_content, on_call_back}
  }
})
</script>
​
<style scoped>
​
</style>

实现效果：