“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”

子传父props

// 子组件
props: {
    name: String,
    age: Number
}

//父组件
<my-comp name="xiaohong" :age="18"></my-comp>

单向数据流，组件创建初始化

Vue官网：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

故不能在子组件中，直接修改父组件传过来的props的值。可以使用一个data的值，使用props的值进行初始化data的值。但这里需要注意的是，这个初始化赋值的操作，只有在组件被创建时，才会发生。后面父组件中的值发生改变，导致子组件中的props的值发生改变，但是data的值不会也跟着改变。想要改变，可以监听props值的改变，再对data的值进行赋值更新。

父传子 — 事件触发

// 父组件中
<my-comp @my-event="onEvent"></my-comp>

...
methods: {
    function onEvent(childData){
        // 通过参数，得到子组件传过来的值
        console.log(childData)
    }
}
...

// 子组件中
...
emits: ['my-event'],

setup(props, context) {
    // 传入 'hellow world'给父组件
    context.emit('my-event', 'hellow word')
}
...

插槽slot

默认：插槽和父组件有相同的作用域，可以访问父组件的变量

使用作用域插槽：访问子组件的量

方式：

子组件的slot中绑定attribute传值；后在父组件中通过 v-slot:default="slotProps", slotProps.attribute访问

// 子组件  -- child-comp

<div>
    <slot name="mySolt" attr1="hellow">默认模板</slot>
</div>

// 父组件

<child-comp #mySlot="slotProps">
    {{slotProps.attr1}}
</child-comp>

Vue官网：作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

function (slotProps) {
  // ... 插槽内容 ...
}

可以看成：父级是定义函数，形参子组件是调用函数，传实参

Vue官网：v3.cn.vuejs.org/guide/compo…

【小点】：v-slot:缩写为#

隔代通信

祖先组件使用provide选项来提供数据，后代组件有inject选项来接收使用数据

provide/inject通信方式相当于长距离props传值

// 父组件
...
data() {
    return {
        d1: 'hellow'
    }
}
provide() {
    return {
        childData: this.data.d1 
    }
}
...

// 子组件
...
inject: ['childData'],
created() {
    console.log('从inject中接收到的值为', this.childData)
}
...

【注】后代组件inject接收的值不是响应式的，需要使用reactive ref进行包装值

// 后代组件inject数据改变，反应到所有后代组件中使用同一reject数据的改变
ref、reactive

provide() {
    return {
        childData: ref(123)
    }
}

// 祖先组件provide改变，影响所有后代组件inject数据改变
祖先组件使用 Vue.computed(() => this.todos.length)

provide() {
    return {
        childData: Vue.computed(() => this.todos.length)
    }
}

ref通信

使用ref，可以直接拿到整一个组件实例，通过使用this.$ref.xxx可以调用组件实例上的方法和使用组件实例上的值

// 子组件

methods: {
    say() {
        console.log('hellow world')
    }
}

// 父组件
<child-comp ref="childComp"></child-comp>
mounted() {
    this.$refs.childComp.say()
}

自定义store

新建一个store.js文件，使用reactive创建一个响应式对象

下述例子来自Vue官网

const store = {
  debug: true,

  state: reactive({
    message: 'Hello!'
  }),

  setMessageAction(newValue) {
    if (this.debug) {
      console.log('setMessageAction triggered with', newValue)
    }

    this.state.message = newValue
  },

  clearMessageAction() {
    if (this.debug) {
      console.log('clearMessageAction triggered')
    }

    this.state.message = ''
  }
}

export default store

// 其他组件中
import store from '@/store.js'
setup(props, ctx){
    
}

vue的通信方法