uniapp props、$ref、$emit、$parent、$child、$on

1. uniapp props、$ref、$emit、$parent、$child、$on

1.1. 父组件和子组件

  propsPage.vue导入props-son-view.vue组件的时候，我们就称index.vue为父组件依次类推，在vue中只要能获取到组件的实例，那么就可以调用组件的属性或是方法进行操作

1.2. props（一般用来单向传值）

  props最适合传递数据，它并不能调用子组件里的属性和方法

1.2.1. 何为单向传值？

  即父组件传值给子组件（首次）但不能动态（再次）改变子组件现有的值,但我非要改呢？ 通过watch监听或者通过$ref标识获取实例后修改以及使用v-modal，使用v-modal会存在不同步情况->使用.sync

1.2.2. props

  （1）props静态传值
  子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据 - 引用脚本。
  （2）props动态传值
  通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值 - 引用脚本之家

1.2.3. 示例

  （1）propsPage.vue

<template><view><view class="btn-item" @click="clickTap()">按钮</view><view class="slot-item"><!--子组件--><props-son-view :msgValue="msgValue" ><template v-slot:lifeSon><view class="slot-item">子组件</view></template></props-son-view></view></view>
</template>
<script>
import PropsSonView from "./props-son-view.vue";export default {components: {PropsSonView},data() {return {msgValue: "",}},onLoad() {},methods: {clickTap() {this.msgValue = "发送给子组件数据"console.log("clickTap",this.msgValue);}}
}
</script><style scoped>
.btn-item {display: inline-block;background-color: #3cc51f;font-size: 12px;padding: 10px 30px;border-radius: 10px;
}
.slot-item {font-size: 16px;padding: 10px;
}
</style>

  （2）props-son-view.vue

<template><view><view class="slot-item">我是子组件：{{msgValue}}</view><slot name="lifeSon"></slot></view>
</template>
<script>
export default {data() {return {title: 'Hello'}},props: {msgValue: {type: String