vue父子元件傳參的4種方式

阿新 • • 發佈：2021-01-06

父元件向子元件傳參

父元件直接繫結在子元件的標籤上，子元件通過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(dataValue)
	}
	}
};
</script>