vue父子组件传参的4种方式

父组件向子组件传参

父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。

父组件

<template>
	<i-activities-item
	    :content="content"
	/>
</template>

<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
  name: 'NewsCenterListPaging',

  components: {
    'i-activities-item': ActivityItem,
  },
  data() {
    return {
      content: 'text',
    };
  },
};
</script>

子组件

<template>
	<div>{{ content }}</div>
</template>

<script>
export default {
  name: '',

  props: {
    content: {
    	// 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
    	// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
		type: String,
		// 定义是否必须传
		required: true,
		// 定义默认值
		default: '暂无'
	},
  },
  data() {
    return {};
  },
};
</script>

父组件主动获取所有的参数和方法（子组件被动传参）

父组件

<template>
	<i-bind-phone ref="phoneRef" :phone="phone" />
</template>

<script>
import PhonePopup from '@/views/personal-center/system-setting/componets/bind-phone';
export default {
  components: {
    'i-bind-phone': PhonePopup,
  },

  data() {
    return {
      phone: null,
      },
  },
  methods: {
    // 点击查看手机绑定
    onClickChangePhone() {
    // 父组件调用子组件中的showPhone方法
      this.$refs.phoneRef.showPhone();
      console.log(this.$refs.phoneRef.visible)
    },
  },
};
</script>

子组件

<template>
	<div v-if="visible">
		....
	</div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      },
  },
  methods: {
    showPhone() {
      this.visible = true
    },
  },
};
</script>

子组件（主动）向父组件传参
方式一
子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。

父组件

<template>
	<i-activities-item
	    :content="content"
	    :callback="onCallback"
	/>
</template>

<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
  name: 'NewsCenterListPaging',

  components: {
    'i-activities-item': ActivityItem,
  },
  data() {
    return {
      content: 'text',
      childValue: ''
    };
  },
  methods: {
   // childrenData就是子组件传递过来的参数
	onCallback(childrenData) {
		console.log(childrenData)
		this.childValue = childrenData
	}
  }
};
</script>

子组件

<template>
	<div>{{ content }}</div>
	<button @clcik="onClick">点击传递向父组件传参</button>
</template>

<script>
export default {
  name: '',

  props: {
    content: {
    	// 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
    	// 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
		type: String,
		// 定义是否必须传
		required: true,
		// 定义默认值
		default: '暂无'
	},
	callback: {
		type: Function
	}
  },
  data() {
    return {
		dataValue: 123
	};
  },
  methods: {
	onClick() {
		this.callback(this.dataValue)
	}
	}
};
</script>

子组件向父组件传参 $emit

父组件

<template>
	<i-activities-item @delete="onDeleteItem" />
</template>

<script>
import ActivityItem from '@/components/activity-item/activity-item';
export default {
  name: 'NewsCenterListPaging',

  components: {
    'i-activities-item': ActivityItem,
  },
  data() {
    return {
      content: 'text',
      childValue: ''
    };
  },
  methods: {
  	// 当子组件触发delete事件时，父组件的该函数就会执行
	onDeleteItem(childrenData) {
		console.log(childrenData) // 123
	}
  }
};
</script>

子组件

<template>
	<button @clcik="onClick">点击传递向父组件传参</button>
</template>

<script>
export default {
  name: '',
  data() {
    return {
		dataValue: 123
	};
  },
  methods: {
	onClick() {
		// 第一个参数为父组件绑定在子组件上的自定义事件，第二个参数为传递的参数
		this.$emit('delete', this.dataValue)
	}
	}
};
</script>