vue学习-08-组件2(父组件传递数据给子组件)

父组件传数据给子组件

1、使用props

创建两个组件parent和child

let child=Vue.extend({
		template: '#child',
		props: {
			data1: String,
			data2: {
				type: String,
				default: '默认值'
			},
			send: {
				type: Function
			}
		},
		methods: {
			btnClick() {
				this.send()
			}
		}
	})
	let parent=Vue.extend({
		template: '#parent',
		components:{
			child
		},
		data() {
			return {
				data2: '数据2'
			}
		},
		methods:{
			send() {
				console.log("我是父组件中的方法")
			}
		}
	})
		new Vue({
			el: '#app',
			components:{
				parent
			}
		})

<template id="parent">
		<div style="height: 500px;width: 600px;
		background-color: skyblue;border: 5px solid black;">
			<child data1="数据1" :data2="data2"></child>
		</div>
	</template>
	
	<template id="child">
		<div style="height: 200px;width: 400px;
		background-color: palevioletred;border: 5px solid black;">
			<h1>从父组件接收到的数据1：{{data1}}</h1>
			<h1>从父组件接收到的数据2：{{data2}}</h1>
			<button @click="btnClick">执行父组件方法</button>
		</div>
	</template>
	
	<div id="app">
			<parent></parent>
	</div>

在父组件中使用子组件标签时：通过属性传值：

<template id="parent">
		<div style="height: 500px;width: 600px;
		background-color: skyblue;border: 5px solid black;">
			<child data1="数据1" :data2="data2"></child>
		</div>
	</template>

在子组件中声明props，key值要与标签中的属性名一致

	let child=Vue.extend({
		template: '#child',
		props: {
			data1: String,
			data2: {
				type: String,
				default: '默认值'
			}
		}
	})

这样就能接收到父组件穿过来的值

2、props接收函数类型（引用类型：函数，数组，object）

像java中的引用类型：内存分配在堆中，传递后的数据指向内存的地址值。
普通类型(number、string)：内存分配在栈中
父组件中定义一个方法

methods: {
			send() {
				console.log("我是父组件中的方法")
			}
		}

在child标签中传递

<child :send="send"></child>

子组件中用props接收

let child=Vue.extend({
		template: '#child',
		props: {
			send: {
				type: Function
			}
		},
		methods: {
			btnClick() {
				this.send()
			}
		}
	})

在子组件中点击调用方法

	<template id="child">
			<button @click="btnClick">执行父组件方法</button>
	</template>

在这里插入代码片

注意 props在使用时只读，不要对其进行修改。如果要使用修改操作，使用computed或者data中定义变量把props的值接收再对其操作