uniapp 父页面传值给子组件

父页面向子组件传值，子组件通过props接收并使用。

1.新建组件页面，并在父组件中引入

//父页面，import引入组件，并注册
<script>
	import searchbar from "../../components/searchbar.vue"
	export default {
		...
		components:{
			searchbar,
		}
	}
</script>

2.父页面中使用组件，并听说过绑定的方式传入值

//父页面
<template>
	<view class="content">
		<searchbar text="大家好"></searchbar>
	</view>
</template>

• 在上面的例子中数据是静态的，所以不加“:”也是可以的。

3.在子组件中接收父页面传入的值

<script>
	export default {
		data() {
			return {};
		},
		props:[
    		    "text",
		]
	}
</script>

4.在子组件中使用传来的值

<template>
	<view>{{text}}</view>
	// <view v-if="text">大家好！！</view>
	// 在样式或者判断语句中，可以直接用不需要双括号。
</template>