组件之间怎么通信

组件之间的通信

父子组件通信

父组件 --> 子组件：prop

背景：
我要在login中使用FormInput组件，实际参数都在login.vue中，传到FormInput中
FormInput.vue 关于输入框组件的定义的定义

<template>
	<view class="form-item-wrapper">
		<label class="label" v-if="label">{{label}}</label>
		<input class="form-native" type="text" :value="value" :placeholder="placeholder" @input="onChange">
		<view class="append-con"><slot name="append"></slot></view>
	</view>
</template>
<script>
	export default {
		props: {
			label: String,
			value: String,
			placeholder: String,
		},
		methods: {
			onChange (e) {
				this.$emit('input', e.target.value)  //自定义组件v-model
			}
		}
	}
</script>

注意：通常我们希望每个prop都有指定的值类型，因此这里，我们以对象的形式列出prop，当然我们也可以以字符串数组的形式列出prop

props: ['lablel','value','placeholder']

login中个关于输入框组件的使用
实际参数传入

//引入
import FormInput from '@/components/FormInput'

export default {
		components: {
			FormInput,
		},
	}

在view中使用

<form-input label="名称" placeholder="请输入名称" v-model="formData.name" />

子组件 --> 父组件： $on / $emit

背景： 我定义了一个子组件，子组件会触发一定方法，传到父组件执行调用的方法，
例子：把子组件的值传给父组件

组件定义

<template>
  <el-form ref="formName" :model="formData" :rules="rules" label-width="85px">
    <el-form-item :label="nameLabel" prop="name">
      <el-input v-model.trim="formData.name" :placeholder="placeholderText"></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="note">
      <el-input type="textarea" placeholder="请输入备注" v-model.trim="formData.note" :rows="4"></el-input>
    </el-form-item>
    <el-form-item class="form-btn-line">
      <el-button @click="onCancel">取消</el-button>
      <el-button :loading="isLoading" type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

export default {
  methods: {
    /* 点击验证并提交 */
    onSubmit () {
      this.$refs.formName.validate((valid) => {
        valid && this.$emit('submit', this.formData)
      })
    },
    initForm () {
      if (this.initData) {
        this.formData = JSON.parse(JSON.stringify(this.initData))
      }
    }
  },
}

父组件使用

  <el-dialog title="新建产品"
               :close-on-click-modal="false"
               :visible.sync="createVisible"
               width="500px">
      <ProductForm v-if="createVisible" :isLoading="submitLoading" @cancel="hideAdd" @submit="addProduct" />
    </el-dialog>

给submit事件传递参数