父组件引用子组件,并注册组件流程:
-
引用:
import psnTable from "@/scopes/project/demo2/modulePart/demo2/part/psnTable";
-
注册:
components: {psnTable},
-
使用组件:
<psnTable/>
1.父组件向子组件传递数据
这个很简单,流程如下:
-
父组件data中定义一个对象,用来存储数据
data () { return { psnTableInfo: [], } }
-
子组件
v-bind
绑定 psnTableInfo<psnTable :psnTableInfo="psnTableInfo"/>
-
子组件中
props
接收父组件的数据 psnTableInfoprops: ['psnTableInfo'],
这时候,在子组件中就可以通过
this.psnTableInfo
调用父组件传过来的数据了
2.子组件向父组件传递数据
子组件不能直接向父组件传递数据,需要通过调用父组件的方法来传递数据
实现流程:
-
在子组件的data中定义一个对象存储数据
data () { return { psnTableInfo: [], } }
-
在父组件的data中也定义一个对象存储数据
data () { return { psnTableData: [], } }
-
在父组件methods中定义一个方法,用来给 psnTableData 赋值
getPsnTableInfo (value) { this.psnTableData = value },
-
子组件
v-on
绑定 getPsnTableInfo 方法<psnTable @putPsnTableInfo="getPsnTableInfo"/>
-
在子组件中调用父组件的方法(可以用
this.$parent
或this.$emit
),个人建议使用this.$emit
这里就使用一个watch来检测 psnTableInfo ,其值一旦变化,就给父组件的 psnTableData 赋值watch: { psnTableInfo: { handler (newValue, oldValue) { this.$emit('putPsnTableInfo', newValue) }, immediate: true, } }
这样,就实现了子组件向父组件传递数据的需求。
3.补充——$refs的用法
可以直接使用 this.$refs.子组件ref.子组件属性/方法
的方法获让父组件获取到子组件的属性或方法
实现流程:
-
给父组件中的子组件标签加上一个
ref
属性<psnTable ref="psnTable"/>
-
在子组件的data中定义一个对象存储数据
data () { return { psnTableInfo: [], } }
-
在父组件中定义一个方法获取子组件的数据 psnTableInfo
data () { return { psnTableData: [], } }, methods: { getPsnTableData () { this.psnTableData = this.$refs.psnTable.psnTableInfo }, setPsnTableData () { this.getPsnTableData() } }
注意: this.$refs.ref.属性名
只能获取到vue中的数据,也就是data中的数据。