2021-07-16

需求

小项目中组件之间传值涉及几个方面：

1. 父组件向子组件传值
2. 子组件向父组件传值
3. 子组件和子组件之间传值

技术栈

vue.js

解决方法

父组件向子组件传值

官网教程：传送门

• 第一步：父组件中，在标签上绑定要传入的值

parent.vue

// 绑定要传递的数据：name
<chilld-component :myName="name"></chilld-component>

​​​​​​​

• 第二步：子组件中使用props接受传递数据

child.vue

// 在script中使用props，数组接受父组件传递的参数
<script>
  data: function() {
    return {
      name: "",
    }
  },
    // 这就是props接收的值
  props: ["myName"],
  methods: {
    numLog: function() {
      // 使用this.myName将传过来的值打印出来，也可以赋值给name
      console.log("这是父组件传过来的值", this.myName);
      this.name = this.myName
    }
  },
  // 生命周期
    created () {
      this.numLog()
    }
  
</script>

子组件向父组件传值

官网教程：传送门

• child.vue
  
  // 使用点击事件，触发传值函数，也可以不用点击事件传值，也可以在生命周期中写传值语句
  <span  @click="selectTag" >子组件中</span>
  
  <script>
    export default {
      data: function() {
        return {
          tag: "我是要传到父组件的值",
        }
      }
      methods: {
        selectTag() {
          // 向父组件要传的值为this.tag，selectTag为传值的名称
          this.$emit("selectTag", this.tag)
        }
      }
    }
  </script>

  ​​​​​​​第一步：子组件中触发事件

• 第二步：父组件中使用$event接受传递参数

parent.vue

// selectTag为传值名称，changeTag为接受参数的函数名
<tag @selectTag="changeTag($event)"></tag>

<script>
  export default {
    data: function() {
      return {
        tag: "",
      }
    }
    methods: {
    // 接收参数的函数
      changeTag(data) {
        // 赋值给父组件中的data值
        this.tag = data
      }
    }
  }
</script>

子组件之间传值

子组件之间的传值是采用以上：子组件向父组件传值以及父组件向子组件传值两种结合的方式来进行传值。自行推导，不再演示。

大型项目组件传值解决方式

vuex

官网教程：传送门

注意： vuex是vue项目中进行状态管理的非常方便的一种形式，但在普通的小项目上使用vuex会导致项目比较重，所以在小项目以及数据之间存在较少的传输时，推荐上面的组件传值方法；但是在大型项目上，vuex会是一个不二选择。