props详解--vue

props是子组件访问父组件数据的唯一接口

这时有人会说不是还有vuex么？

当然vuex也是可以的，但是vuex不是万能的，某些特定场景还是需要用到父子通信的，pops就是其中不可缺少的成员之一。

1.基本用法：

//父组件：
<template>
	<view class="content">
        <!-- 引入子组件 serviceModal -->
        <!-- 注：1这里引用serviceModal组件一定要用-把驼峰拆开来写，方便后人来读代码 -->
        <!--     2:tel="tel" 这里是v-bind:tel="tel"的简写，有疑问的可以去查一下 -->
        <!--     3.传值类型，任意可读类型 不使用v-bind也是可以的 tel='123456789'  -->
        <!--     4.可以传递多个值，多个方法 -->
		<service-modal :tel="tel" :type="1" @closeModal="closeModal"/>
	</view>
</template>

<script>
    //引入子组件
    //注：1.这里引用时一定要用驼峰命名法  2.引入vue文件后缀.vue可以省略哦！
    //    3.@/还是./还是../ 这里怎样舒服怎样来，有疑问的可以去查一下
	import serviceModal from '@/components/service-modal'

	export default {
		data() {
			return {
                tel:"12345678900"
            }
		},
        //这里使用components注册组件
        //注：引入之后需要使用components注册组件，注册组件要和引入时名称相同，否则无法使用
		components: {
			serviceModal
		},
        methods: {
			closeModal(){
				console.log("关闭弹窗方法调用")
			},
		},
	}
</script>
<style lang="scss"></style>

//子组件：
<template>
	<view class="modal">
		<view class="tel-tit">
			<view>客服电话</view>
		</view>
		<view class="tel-con">
            // {{}} 使用插值表达式引用tel（有的人也叫它大胡子表达式）
			<view>{{tel}}</view>
			<view>工作时间:(09:00-18:00)</view>
		</view>
        <view class="tel-btn">
			<view @click="closeModal">取消</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		name:'modal',
        //这里props接收父组件传过来的值
		props: {
            //需要使用那些就接收哪些，不使用可以不接收哦,接收过来的值时只读，不可修改的
			tel: {
                type: [String,Number] //多个可能的类型
                //type规定数据类型 default默认值，如果引用组件时没有传tel将会使用默认的值
                //type: String, //固定一个类型
				//default: '12345678901' // 默认值
                //validator: (value) => {return parseInt(value) >= 0} //自定义校验
			},
		},
		data(){
			return{
                //props接收的值只读，可以使用这种方法存一下，后面修改这个值就可以了
                newTel:this.tel.trim().toLowerCase()
            }
		},
		created() {
            //这里修改newTel是没有问题的，也不会有警告信息
            this.newTel = this.newTel*1
        },
		computed: {},
		methods: {
            closeModal(){ // 使用$emit调用父组件方法
				this.$emit('closeModal')
			},
        },
	}
</script>
<style lang="scss" scoped></style>

2.单向数据流

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况。每次父组件更新后，所有的子组件中的 props 都会被更新到最新值。

3.调用父组件方法$emit

详看我的另一篇文章 $emit,$on,$off 

4. $parent

$parent 也可以用来访问父组件的数据。也可以通过$parent 来直接修改父组件的数据，不会报错！

可以使用props的时候，尽量使用props显式地传递数据（可以很清楚很快速地看出子组件引用了父组件的哪些数据）。

另外在一方面，直接在子组件中修改父组件的数据是很糟糕的做法，props单向数据流就没有这种顾虑了。

官方文档：Props | Vue.js