vue 组件 父子传值 子组件触发父组件函数

1. 父组件使用子组件

父组件将子组件引入

// 引入子组件
import Child from './outDialog';

export default {
  name: 'invoice_out',
  // components 挂载组件到父组件  就可以使用了
  components: { Child },
  data() {
    return {},
  created() {},

2.父子传值

父组件传给子组件的值为字符串时直接修改会报错
所以父组件传给子组件的值不要直接修改 赋值给子组件中的变量之后再进行修改

父组件 在父组件使用的子组件上用 : 变量名冒号绑定一个变量

<chile
      @formVisible="showDialogs"
      :stateCode="stateCode"
    ></chile>

子组件 使用 prop接收父组件的参数

props: {
	变量名 :{
		type: 传递的数据类型,
		default: 默认值,
	}
}

3.子组件触发父组件函数

父组件绑定自定义函数@formVisible="showDialogs"

<chile
      @formVisible="showDialogs"
      @listOutputInvoices="listOutputInvoices"
    ></chile>

子组件触发 父组件上绑定的 listOutputInvoices函数

this.$emit('listOutputInvoices');