vue 组件传参

组件传参

父传子 props 传参

父传子是要根据 子组件需要的参数进行传递 ,子组件通过props 进行接收

<script>
export default {
  props: {
    giveEmit: {
      type: String
    }
  }
}
</script>

这个子组件 就规定了传递参数的名字 只能叫 giveEmit , 也规定了传递参数的数据类型就只能是String 字符串类型, 传递的类型不对是无法传参的 类型根据需求设定

父组件传递的时候 参数名要跟子组件 保持一致 :giveEmit=" " 填入需要传递的数据即可

<emitProps :giveEmit="myProps" ></emitProps>

子传父 $emit() 传参

子传父 使用this.$emit() 引号内的是父组件接收用的名字 可自定义, this.name 就是需要对父组件进行传递的数据

 mounted () {
    //触发 emitData 方法 this.name 为向父组件传递的数据
    this.$emit('emitData', this.name)
  },

在父组件中接收 用 @emitData=" " 根子组件传递的名字保持一致

<emitProps @emitData="emit"></emitProps>
export default {
 data () {
    return {
      myEmit:''
    }
  },
  methods: {
  //用方法接收   赋值 就可以拿到子组件传递数据
    emit(val){
        this.myEmit = val
    }
  }
}