本文只有一个学习点。
父组件如何向子组件传递数据。
一起学习，更多文章请关注我的头条号，我是落笔承冰。
一、先创建一张空白网页index.html，在head标签里设置好vue的链接库。
二、写一个绑定元素div，一个子组件，一个父组件，父组件与元素div绑定。
三、我们写子组件的模板，并在div内调用它，看看是否有效果。
你会发现网页里，空空的，什么也没有，那是因为是子组件没有在父组件里注册。
不是全局子组件，是要在父组件那里注册的。
四、那我们注册子组件吧。
再刷新浏览器，终于出来了。
五、我们先试一下，父组件怎么把数据传给子组件。:tocmp就是父组件的要传给子组件的数据，子组件用props来接收。
试试效果吧
这里就完成了父组件向子组件传递数据。
 Document

vue父组件获取子组件数据

父组件;在已引入的子组件标签

 <child @cityCode="cityCode" ref="childSheng"></child>

获取子组件的事件，在父组件方法中
 this.$refs.childSheng.getTileUrl();

获取子组件数据，在父组件方法中
cityCode(val) {
	console.log(val)
}


子组件中

将数据传给父组件

this.$emit("cityCode", city);

<template>
  <div id="app">
      <afooter></afooter>
  </div>
</template>
<script>
import afooter from './components/children/footer'
export default {
  name: 'app',
  components:{
    afooter,
 
  }, 
}
</script>
<style lang="scss">
</style>

<template>
 <div id="afooter">
 </div>
</template>
<script>
export default {
    name:"afooter",  
}
</script>
<style lang='scss'>
</style>

子组件获取父组件的内容

App.vue声明methods  在header.vue的mounted中添加父组件已经声明过的方法

父组件获取子组件的内容

header.vue声明方法  在App.vue的mounted中添加子组件已经声明过的方法





其他设置

在App.vue中的header标签上添加说明







其余import、components的添加



data的添加



header.vue中说明


完整代码

总结目录
方法总结
子组件获取父组件变量(也可用父组件调用子组件中的方法传值)
父组件获取子组件变量(介绍两种方法)
父组件调用子组件中的方法
子组件调用父组件中方法(介绍两种方法)

方法总结

vue父子组件数据/方法传递调用

变量传递： 父组件变量传送到子组件、子组件变量传送到父组件

方法调用： 父组件调用子组件中方法、子组件调用父组件中方法

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

方法关键字：props

步骤(2步)：

在父组件引用子组件标签中定义接受变量名并传值 。

公式：:子组件接受变量名=“父组件要传的变量名”

如 ：nowPriceF="nowPrice"
在子组件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步)：


在父组件引用子组件标签中定义ref，利用ref获取子组件变量。

公式：ref=“对子组件定义唯一ref值”

如 ：ref="addChild"


在父组件中直接获取子组件中的变量。

公式：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步)：


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

如 ：this.$emit(‘lookPhotos’,file.url)


在父组件引用子组件标签中获取子组件定义的方法并获得参数。

公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($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步)：

在父组件引用子组件标签中定义ref，利用ref获取子组件变量。

公式：ref=“对子组件定义唯一ref值”

如 ：ref="addChild"
在父组件中直接调用子组件中的方法，可传参数。子组件获取父组件变量也可以用这个方法。

公式：this.$refs.addChild.子组件中方法名**
  如：**that.$refs.addChild.calculateWithdrawal(row)
在子组件中执行调用的方法，可获取参数。

公式：定义普通方法一样

如：calculateWithdrawal(row){ }


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

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

子组件调用父组件中方法(介绍两种方法)
1. 方法一 【常用】（也就是父组件获取子组件变量的方法2）

方法关键字：$emit

步骤(2步)：


在子组件中通过$emit调用父组件中定义的方法，参数可有可没有。

公式：this.$emit('传递到父组件的方法名',需要传递的变量)”

如 ：this.$emit(‘lookPhotos’,file.url)


在父组件引用子组件标签中获取子组件定义的方法并获得参数。

公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($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步)：

在子组件中通过 $parent调用父组件中的方法。

公式：this.$parent.父组件方法名

如 ：this.$parent.oFF_orgDialog()

注意：可能会报错误 TypeError: this.$parent.xxx is not a function

解决方法：这里 ，不过尽量使用方法一

完整例子：
//子组件
this.$parent.oFF_orgDialog()
//oFF_orgDialog( ) 	父组件中方法