vue组件传值

data和props

什么是动态数据data

当一个实例创建的时候，Vue会将其响应系统的数据放在data选项中，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。初始定行的行为代码也都会随着响应系统进行一个映射。而 data 选项中的数据在实例中可以任意改变，不受任何影响，前提必须数据要跟逻辑相辅相成

什么是静态数据props

使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，需要通过props选项来进行接收。子组件需要显示的声明接收父组件传递来的数据的（数量，类型，初始值）。简单的接收可以通过数组的形式来进行接收

他们有什么相同点

两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化

他们有什么不同点

Data 被称之为动态数据的原因，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。

Props 被称之为静态数据的原因，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型。

更为关键地是，对数据单向流的理解，props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据

父组件向子组件传值

vue中的父组件向子组件传值

创建子组件

创建子组件，并使用props接收父组件参数

<template>
  <div>
    <h1>我是子组件</h1>
    <h2>子组件接收信息：{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: 'Children',
  props: {
    msg: {
      type: String,
    },
  },
  data() {
    return {}
  },
}
</script>

创建父组件

在使用子组件时传值

<template>
  <div>
    <h1>我是父组件</h1>
    <Children :msg="msg" />
  </div>
</template>

<script>
import Children from '../components/Children'
export default {
  name: 'test',
  data() {
    return {
      msg: '我是传递信息',
    }
  },
  components: {
    Children,
  },
}
</script>

子组件向父组件传值

在子组件向父组件传值时需要使用 vue 中的 $on 和 $emit ，使用$emit 可以触发 $on 中监听的事件

emit

子组件

  created() {
    this.$on(['my-click'], (arg) => {
      // console.log(1)
      // console.log(arg)
    })
  },
  mounted() {},
  methods: {
    handleClick(event) {
      // console.log('执行button组件的点击事件')
      this.$emit('my-click', event)
    },
  },

父组件

<my-button @my-click="handleClick" :class="btnColor">
      DELETE
    </my-button>