materio 模板vue3的引用与传参

对于 Materio 模板中的 Vue 3，您可以使用以下几种方式来引用和传递参数：

1. 使用 props 属性传递参数

在父组件中使用 v-bind 指令将需要传递的参数绑定到子组件的 props 属性上，例如：

<template>
  <child-component :prop1="value1" :prop2="value2"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value1: 'hello',
      value2: 'world'
    }
  }
}
</script>

在子组件中，可以通过 props 属性来接收父组件传递的参数：

<template>
  <div>{{ prop1 }} {{ prop2 }}</div>
</template>

<script>
export default {
  props: {
    prop1: String,
    prop2: String
  }
}
</script>

2. 使用 provide/inject API

在父组件中使用 provide 属性提供需要传递的参数，例如：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value1: 'hello',
      value2: 'world'
    }
  },
  provide() {
    return {
      prop1: this.value1,
      prop2: this.value2
    }
  }
}
</script>

在子组件中，可以通过 inject 属性来获取父组件提供的参数：

<template>
  <div>{{ prop1 }} {{ prop2 }}</div>
</template>

<script>
export default {
  inject: ['prop1', 'prop2']
}
</script>

以上就是在 Materio 模板中使用 Vue 3 引用和传递参数的两种方式，希望能对您有所帮助。