vue组件,父传子、子传父、父调子、子调父简单理解总结

方法总结

vue父子组件数据/方法传递调用
变量传递： 父组件变量传送到子组件、子组件变量传送到父组件
方法调用： 父组件调用子组件中方法、子组件调用父组件中方法

子组件获取父组件变量(也可用父组件调用子组件中的方法传值)

方法关键字：props
步骤(2步)：

1. 在父组件引用子组件标签中定义接受变量名并传值 。
   公式：:子组件接受变量名=“父组件要传的变量名”
   如 ：nowPriceF="nowPrice"
2. 在子组件data()方法平级定义props对象接收变量。
   公式：props: { }
   如：props: {nowPriceF: Number}

完整例子：

// 父组件
<Add v-if="orgDialogVisible" ref="addChild" :nowPriceF='Number(nowPrice)'></Add>

// 子组件
export default {
 props: {
   nowPriceF: Number
 },
 data() {}
}

父组件获取子组件变量(介绍两种方法)

1. 方法一

方法关键字：ref 、$refs
步骤(2步)：

1. 在父组件引用子组件标签中定义ref，利用ref获取子组件变量。
   公式：ref=“对子组件定义唯一ref值”
   如 ：ref="addChild"

2. 在父组件中直接获取子组件中的变量。
   公式：this.$refs.addChild.子组件中变量名

   如：this.$refs.addChild.addForm
   完整例子：

//父组件
<Add v-if="orgDialogVisible" ref="addChild" :nowPriceF='Number(nowPrice)'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.addForm

2. 方法二（也是子组件调用父组件的方法）

方法关键字：$emit
步骤(2步)：

1. 在子组件中通过$emit调用父组件中定义的方法，将变量以参数带过去。公式：\ast \ast ‘‘‘‘this.$emit(‘传递到父组件的方法名’,需要传递的变量)”````**
   如 ：this.$emit(‘lookPhotos’,file.url)

2. 在父组件引用子组件标签中获取子组件定义的方法并获得参数。
   公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($event)"

   如：@lookPhotos="lookPhotosUrl($event)"
   完整例子：

//子组件
handlePictureCardPreview(file) {
  this.$emit('lookPhotos',file.url)
  //lookPhotos 定义传递到父元素的方法名
  //file.url 父元素要获取的东西
},

//父组件
<Add v-if="orgDialogVisible" ref="addChild" @lookPhotos="lookPhotosUrl($event)" :nowPriceF='Number(nowPrice)'></Add>

//在methods: {}中获取
lookPhotosUrl(url){
   console.log('父元素需要的东西'，url)
},

父组件调用子组件中的方法

方法关键字：ref、$refs
步骤(3步)：

1. 在父组件引用子组件标签中定义ref，利用ref获取子组件变量。
   公式：ref=“对子组件定义唯一ref值”
   如 ：ref="addChild"
2. 在父组件中直接调用子组件中的方法，可传参数。子组件获取父组件变量也可以用这个方法。
   公式：this.$refs.addChild.子组件中方法名\ast \ast 如：\ast \ast that.$refs.addChild.calculateWithdrawal(row)
3. 在子组件中执行调用的方法，可获取参数。
   公式：定义普通方法一样
   如：calculateWithdrawal(row){ }

完整例子：

//父组件，标签中定义ref就不贴代码了 都懂得
this.$refs.addChild.calculateWithdrawal(row)
//calculateWithdrawal 子组件中定义好的方法

calculateWithdrawal(row){
	console.log('父组件中调用了这个方法并传递了参数'，row)
}

子组件调用父组件中方法(介绍两种方法)

1. 方法一 【常用】（也就是父组件获取子组件变量的方法2）

方法关键字：$emit
步骤(2步)：

1. 在子组件中通过$emit调用父组件中定义的方法，参数可有可没有。
   公式：this.$emit('传递到父组件的方法名',需要传递的变量)”
   如 ：this.$emit(‘lookPhotos’,file.url)

2. 在父组件引用子组件标签中获取子组件定义的方法并获得参数。
   公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($event)"

   如：@lookPhotos="lookPhotosUrl($event)"
   完整例子：

//子组件
handlePictureCardPreview(file) {
  this.$emit('lookPhotos',file.url)
  //lookPhotos 定义传递到父元素的方法名
},

//父组件
<Add v-if="orgDialogVisible" ref="addChild" @lookPhotos="lookPhotosUrl($event)" :nowPriceF='Number(nowPrice)'></Add>

lookPhotosUrl(url){
   console.log('我是被子组件召唤的方法'，url)
},

2. 方法二

方法关键字：$parent
步骤(1步)：

1. 在子组件中通过 $parent调用父组件中的方法。
   公式：this.$parent.父组件方法名
   如 ：this.$parent.oFF_orgDialog()

注意：可能会报错误 TypeError: this.$parent.xxx is not a function
解决方法：这里 ，不过尽量使用方法一

完整例子：

//子组件
this.$parent.oFF_orgDialog()
//oFF_orgDialog( ) 	父组件中方法