Vue父组件的值传给子组件

Vue父组件的值传给子组件

1. 自己网上搜到一种方法

我做的是获取父组件表格每一行作为参数
父组件：这个params要在data中赋初始值

//这是script里的代码
export default {
	data ()  {
	  return：{
	  params: ''
	  }
	},
	method: {
		getParams: function (row, index) {
		  this.params = [JSON.stringify(row)]
		}
	}
}

子组件：

	method: {
		getData () {
		const params = this.$parent.$vnode.context.params
		console.log(this.params)
		//下面就是根据父组件传过来的参数调取接口
		}
	}

这时候可以console一下看他输出的值,也可以打断点找到自己想要的值。

2. 最常用的方法props( )

父组件：

<template>
	<div>
		<Child :params="params"></Child>
	</div>
</template>
<script>
export default {
	data ()  {
	  return：{
	  params: ''
	  }
	},
	method: {
		getParams: function (row, index) {
		  this.params = [JSON.stringify(row)]
		}
	}
}
</script>

子组件：

export default {
  components: {
    Child
  },
  props: {
    params: {
      type: Array,
      default: function () { return [] }
    }
  },
 }

链接: https://mp.csdn.net/mdeditor/103299788