vue：组件传值你了解吗？

vue的组件传值有多种，常用的有父传子(props)、子传父(emit->props)

• 父传子(props)：如果传的值为基础类型，那么值是不可改变的；如果传的是引用类型，引用类型里面的值是可以被改变的,简单来说传过去的值有点类似是常量的，不可被再次赋值。

<template>
  <!--parent.vue父级页面-->
  <div>
    <!-- :queryParams="queryParams父级页面data里面的变量 -->
    <children :queryParams="queryParams" :msgText="msgText" />
    我是父组件：<a href="javascript:;" @click="demo">点击我查看</a>
  </div>
</template>
<script>
// 子组件
import children from '@/views/salesManagement/children.vue' //子组件所在路径

export default {
  components: {
    children,
  }, //初始化组件
  data() {
    return {
      queryParams: {
        name: '小明',
        sex: 18,
        age: '男',
      },
      msgText: '我是父级页面传递的值',
    }
  },
  methods: {
    demo() {
      console.log(this.queryParams)
    },
  },
}
</script>

<template>
  <!-- children.vue 子级页面 -->
  <div>我是子组件：<a href="javascript:;" @click="demo">点击添加</a></div>
</template>
<script>
export default {
  props: {
    queryParams: Object, //父组件传过来的变量名称，指定类型、如果类型不对会报错
    msgText: String,
  },
  data() {
    return {}
  },
  mounted() {
    //跟访问data里面的变量一样，this可以拿到
    console.log(this.queryParams, this.msgText)
  },
  methods: {
    demo() {
      this.queryParams.value = '我是子组件，我要添加一个值进来'
      //this.msgText = '' //报错，不可修改
      console.log(this.queryParams, this.msgText)
    },
  },
}
</script>

• 子传父(emit传递一个方法过去；方法有N个形参，第一个参数：父组件接收的方法名称；第二个参数：类型不限；第N个后面用逗号分隔

<template>
  <!-- children.vue 子级页面 -->
  <div>
    <!-- 点击触发子组件传值 -->
    <a href="javascript:;" @click="onChange">点我传递</a>
  </div>
</template>
<script>
export default {
  props: {
    queryParams: Object, //父组件传过来的变量名称，指定类型、如果类型不对会报错
  },
  data() {
    return {
      msg: '早上好，现在是2021年6月4号',
      text: 'Hello China!',
    }
  },
  mounted() {},
  methods: {
    onChange() {
      //传过去的的变量 多个参数值：this.$emit('onChange', this.msg,this.text)、也可用对象包裹：this.$emit('onChange', {msg:this.msg,text:this.text})
      this.$emit('onChange', this.msg)
    },
  },
}
</script>

<template>
  <!--parent.vue父级页面-->
  <div>
    <!-- 子组件传递的方法名称onChange -->
    <children @onChange="onChange" />
  </div>
</template>
<script>
// 子组件
import children from '@/views/salesManagement/children.vue' //子组件所在路径

export default {
  components: {
    children,
  }, //初始化组件
  data() {
    return {
      queryParams: {},
    }
  },
  mounted() {},
  methods: {
    onChange(val) {
      console.log(val) //子组件传递过来的值，多个形参用逗号分隔
    },
  },
}
</script>

• 兄弟传值($emit->props):从子组件传递值到父组件；在从父组件传递到另一个子组件。可达到兄弟传值的效果，兄弟传值只讲逻辑具体就不演示了！

总结：组件之间的传值不复杂，初学者可能觉得有点绕；看着有点蒙；多联系摸索一下，也是很快就熟练了。