Vue 属性传值Props

Posted 2023-04-05

参考技术A 是以对象的形式书写，属性名users中存在两个属性，type数据形式，required该数据形式的数据是否符合其规定。如果有更多属性传值，可以继续在props中书写。

vue的组件传值

一、组件传值有
1.父传子
2.字传父
3.兄弟

1.父传子
1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}

props是单向传递的

1.定义数据
 data() {
    return {
  

      list1: [
        {
          id: 1,
          html: "a"
        },
        {
          id: 2,
          html: "6"
        }
      ],
      l: []
    };
  },

2.父组件挂载

import bbb from "./b";
export default {
  components: {
    bbb
  },
  }
  <bbb :list="list1"/>

3.子组件接收,就可以使用了

export default {
  props:['list1'],
  }

2.字传父
（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的
1.自定义事件
2.用emit

<input type="text" v-model="a" @keyup="k" />
  methods: {
    k() {
      this.$emit("k", this.a);
    }
  },

3.在父组件接收事件

<bbb @k="k" />
 k(a) {
      this.list.push(a);
    },

3.兄弟
（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
1.创建一个文件夹utils里面Bus.js然后导出一个空的vue实例

import Vue from "vue";


//抛出空的实例化对象
export default  new Vue();

2.在导入一方引入bus.js
使用是bus.emit

import bus from '../utils/bus'
	  k() {
      bus.$emit("k", this.a);
    }

3.在父组件导入bus.js 然后用bus.on(“事件名”,(data)

import bus from '../utils/bus'
bus.on("k",data)

​四、：通过 vuex 实现

​ 具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态