Vue学习笔记 - 父子组件传值（props与$emit）

Posted 2022-12-07 WHOVENLY

目录

• 一、父组件向子组件传值
• 二、子组件向父组件传值

一、父组件向子组件传值

通过props实现父组件向子组件传值。

1.首先，我们先创建好父组件和子组件，并将子组件引入父组件中。
父组件parent：

<template>
  <div class="page">
    父组件
    <child></child>
  </div>
</template>

<script>
import child from "./child.vue";

export default 
  name: "pc_parent",
  components: 
    child,
  ,
;
</script>

子组件child：

<template>
  <div class="page">
    子组件
  </div>
</template>

<script>
export default 
  name: "pc_child",
;
</script>

2.对子组件进行修改

<template>
  <div class="page">
    子组件
    <!-- ③在页面中展示从父组件中传来的值 -->
    <p>value2</p>
  </div>
</template>

<script>
export default 
  name: "pc_child",
  //①为子组件添加props属性
  props: 
    //②value2用于接受父组件传来值
    value2: "",
  ,
;
</script>

3.对父组件进行修改

<template>
  <div class="page">
    父组件
    <!-- 将value2值传递给子元素 -->
    <child :value2='value1'></child>
  </div>
</template>

<script>
import child from "./child.vue";

export default 
  name: "pc_parent",
  components: 
    child,
  ,
  data() 
    return 
      // ①设置value1为传递给子元素的值
      value1: "我是从父组件来的值",
    ;
  ,
;
</script>

4.效果展示：
因为我们在子元素中展示了父元素传递来的值，所以在页面中可以看到父元素传来的值，说明父组件向子组件传递值成功。

二、子组件向父组件传值

通过$emit实现子组件向父组件传值。

1.首先，我们先创建好父组件和子组件，并将子组件引入父组件中。
父组件parent：

<template>
  <div class="page">
    父组件
    <child></child>
  </div>
</template>

<script>
import child from "./child.vue";
export default 
  name: "pc_parent",
  components: 
    child,
  ,
;
</script>

---

子组件child：

<template>
  <div class="page">
    子组件
  </div>
</template>

<script>
export default 
  name: "pc_child",
;
</script>

2.对子组件进行修改

<template>
  <div class="page">
    子组件
    <!-- ①为该按钮添加一个点击事件，进行传值 -->
    <button @click="byval">点击我向父组件传值</button>
  </div>
</template>

<script>
export default 
  name: "pc_child",
  methods:
    byval()
      // ②通过$emit进行传值，第一个参数为方法名，第二个参数为需要传递的值
      this.$emit('byval1','子组件传来的值')
    
  
;
</script>

3.对父组件进行修改

<template>
  <div class="page">
    父组件
    <!-- ①用子元素的byval1方法绑定父元素的byval2方法 -->
    <child @byval1='byval2'></child>
    <!-- ③展示子元素传递来的值 -->
    value
  </div>
</template>

<script>
import child from "./child.vue";

export default 
  name: "pc_parent",
  components: 
    child,
  ,
  data() 
    return 
      value: "",
    ;
  ,
  methods: 
    // ②书写父元素的byval2方法，将传递来的值复制给value。
    byval2(value) 
      this.value = value;
    ,
  ,
;
</script>

4.效果展示
初始页面效果：

点击按钮后的效果：

当点击后，子组件中的值通过$emit将值传递给了父元素，并复制给父元素中的value值，所以页面中会展示子元素传递来的值。