props

父组件向子组件传值

//父组件
<template>
  <home-child :name="name"/>
</template>
<script>
  data() {
    return {
      name: 'harry'
    }
  },
</script>

//子组件
<template>
  <div>父组件传来的值Name：{{name}}</div>
</template>
<script>
  props: {
    name: String
  }
</script>

image.png

依赖注入

当组件层级过深时，props就会比较麻烦，需要一层一层传递，这时我们可以使用依赖注入，一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

• Provide (供给)
  要为组件后代供给数据，需要使用到 provide 选项
  （为配合响应性，我们可将供给的值转换为一个计算属性）
• Inject (注入)
  要注入祖先组件供给的数据，需使用 inject 选项
  注入可设置别名和默认值

//父组件
export default {
  provide: {
    message: 'hello'
  }
}

//子组件
<template>
  <div>依赖注入传递归来的值message：{{message}}</div>
</template>

export default {
  inject: ['message']
}

image.png

$emit

在组件的模板表达式中，可以直接使用$emit函数触发自定义事件
$emit函数同样也是组件实例上的方法：this.$emit()
父组件可以通过 v-on (缩写为 @) 来监听事件

//父组件
<template>
  <home-child @btnClick = 'btnClick'/>
</template>

export default {
  methods: {
    btnClick() {
      alert('触发事件')
    }
  }
}

//子组件
<template>
  <div class="box" @click="btnClick"></div>
</template>

export default {
  emits: ['btnClick'], //显示的声明要触发的事件
  methods: {
    btnClick() {
      this.$emit('btnClick')
    }
  }
}

image.png

ref

• ref 是一个特殊的 attribute，它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用
• 只可以在组件挂载后才能访问 ref
• 如果一个子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互

//父组件
<template>
  <home-child ref= 'home_child'/>
</template>

export default {
    mounted() {
      let child = this.$refs.home_child //拿到子组件的实例
      console.log(child.age); //11 访问子组件的属性
  }
}

//子组件
export default {
  data() {
    return {
      age: 11
    }
  }
}

vuex

如果业务逻辑复杂，很多组件需要处理一些相同的信息，采用普通的方式就会处理困难，vuex可以帮助我们把一些公共的数据抽离出来，便于其他组件处理，变更状态

setup()

vue3提供了一种新方法来进行组件之间的数据传递setup()
我们在组件中用到的数据和方法，都定义在setup配置项中

//子组件
<template>
  <div class="home-child">
    <h4>子组件</h4>
    <div>父组件传来的值: {{title}}</div>
    <button @click="btnClick">向父组件说话</button>
  </div>
</template>

<script>
export default {
  name: 'HomeChild',
  props: {
    title: String
  },
  setup(props, {emit}) {
    let ask = '我是子组件，我向父组件说话'
    const btnClick = () => {
      emit('btnClick', ask)
    }
    return {
      btnClick
    }
  }
}
</script>

//父组件
<template>
  <div id="home">
    <h3>父组件</h3>
    <div>子组件说：{{children_mes}}</div>
    <home-child :title="title" @btnClick='btnClick'/>
  </div>
</template>

<script>
import { ref } from 'vue'
import HomeChild from './childComps/HomeChild.vue'
export default {
  name: 'Home',
  components: {HomeChild},
  setup() {
    let title = '我是父组件传来的值'
    let children_mes = ref('')
    const btnClick = mes => {
      children_mes.value = mes
    }
    return {
      title,
      children_mes,
      btnClick
    }
  }
}
</script>

image.png

当点击按钮时，子组件向父组件发送信息

image.png