Vue-小学生都能看懂并使用的子父组件传值

目录

搭建的框架目录结构

一、父传子动图效果及源码

父传子源码：

二、子传父动图效果

子传父源码：

三、详细解说组件传递过程：组件传值模板

1.父--->子

①属性props

②引用refs传值

2.子--->父

①属性emit

---

搭建的框架目录结构

一、父传子动图效果及源码

父传子源码：

父组件：

<template>
  <div>
    <div>
      <p v-html="theCardTitle"></p>
      <button @click="sendMessage">OK</button>
    </div>
    <div>
      <ChildCard :parentMessage="parentMessage"></ChildCard>
    </div>
  </div>
</template>
<script>
import ChildCard from "../sub/ChildCard";
export default {
  data() {
    return {
      theCardTitle: "父组件",
      parentMessage: ""
    };
  },
  components: {
    ChildCard
  },
  methods: {
    sendMessage() {
      this.parentMessage = "<b>消息来自父组件：</b> (^_^)!";
    }
  },
};
</script>

子组件：

<template>
  <div>
    <div>
      <p v-html="theCardBody"></p>
      <div v-html="parentMessage"></div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: ["parentMessage"],
  data() {
    return {
      theCardBody: "子组件"
    };
  }
};
</script>

二、子传父动图效果

子传父源码：

父组件：

<template>
  <div>
    <div>
      <p v-html="theCardTitle"></p>
      <span>{
  {parentMessage}}</span>
      <ChildCardOne @childByValue="childByValue"></ChildCardOne>
    </div>
  </div>
</template>
 
<script>
import ChildCardOne from "../sub/ChildCardOne";
export default {
  data() {
    return {
      theCardTitle: "父组件",
      parentMessage: ""
    };
  },
  components: {
    ChildCardOne
  },
  methods: {
    childByValue(childValue) {
      this.parentMessage = childValue;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <p v-text="theCardTitle"></p>
    <span>{
  {childValue}}</span>
    <div>
      <button @click="ok">OK</button>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      theCardTitle: "子组件",
      childValue: "我是子组件的数据"
    };
  },
  methods: {
    ok() {
      this.$emit("childByValue", this.childValue);
    }
  }
};
</script>

三、详细解说组件传递过程：组件传值模板

也可以说这部分的内容是将组件的传递过程的关键代码给抽离出来了，帮助大家更好的理解如何使用传值！