标签: vue-props

我正在 vuejs 中编写一个应用程序，我想将 prop 传递给子组件，但我收到此错误：

props从的根范围获取值setup()将导致该值失去反应性

父组件

<template>
  <div>
      <course-list :courseId = "id"  />
  </div>
</template>

import {useRoute} from 'vue-router';
import { ref, onMounted, reactive} from 'vue';
export default defineComponent({
  components: { NavBar, CourseList, CourseContent },
  props:{
    courseId: String
  },
  setup(){
      const route = useRoute()

      const id = route.params.id
      console.log("the course id is", id);

    return{
      id
    }
  }
}

子组件

export default defineComponent({
  components: { CourseTopic },
  props: {
      courseId: {
        type: String
      }
    },
  setup(props) { …

我的组件很简单：

<template>
  <btn :color="color" @click="toggleColor">{{btnmsg}}</btn>
</template>

<script>
  import { Btn } from 'chico'
  export default {
    name: 'AButton',
    components: {
      Btn
    },
    data() {
      return {
        btnmsg: 'Legia pany',
        colors: [
          'blue', 'black', 'green', 
          'orange', 'teal', 'cyan', 
          'yellow', 'white'
        ],
        color: 'red'
      }
    },
    methods: {
      toggleColor() {
        this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))];
      }
    }
  }
</script>

ChicoFamily 的内容<Btn>是这样的：

<template>
  <button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role">
    <slot></slot>
  </button>
</template>

<script>
import classNames from 'classnames';
export default { …

我的“Generateur”组件正在向我的“Visionneuse”组件发送道具。浏览器中一切正常，但我在控制台中看到以下消息：

Set operation on key "texteEnvoye" failed: target is readonly.\n

我真的不知道为什么会收到此消息，因为我将道具传递给了引用。\n这是我的组件：\n“Generateur”

<template>\n  <div>\n    <h1>G\xc3\xa9n\xc3\xa9ration d'une carte de voeux</h1>\n    <div class="board">\n      <Visionneuse :texteEnvoye="texte" :taille="0.5"/>\n    </div>\n    <textarea\n      :style="'width: 60%; resize:none;height: 100px;'"\n      v-model="texte"\n      placeholder="\xc3\x89crivez votre texte ici">\n    </textarea>\n  </div>\n  <div>\n    <button\n      v-if="lien.length == 0"\n      id="boutonObtenirLien"\n      v-bind:class="{ enCours: lienEnCours }"\n      class="btn first"\n      @click="obtenirLien">Obtenir le lien</button>\n    <p\n      v-if="lien.length > 0">\n      Votre carte de voeux est accessible au lien suivant:<br/>\n      <a :href="lien">{{ lien }}</a>\n    </p>\n  </div>\n</template>\n\n<script>\nimport Visionneuse from '@/components/Visionneuse.vue';\n\nimport axios from 'axios';\n\nimport {\n …

I'm trying to set types on my slot props to handle in a table component as you can see in the image

I also have been trying with

#body={item: UserItem}, but it is only rename the parametter. #body={<UserItem>item} and #body={item<UserItem>}, but it does not work

当 prop 更新时如何调用函数？

父容器：

<div>     
  <Maintable :type="typeRef" :country="countryRef" />
</div>

子容器：

    export default{

    props: ['type'],
    
    setup(props)
    {   
        watch(props.type, () => {
            console.log('hello')
        })
    }

此代码收到错误：无效的监视源...我如何侦听道具的更新？

希望有人可以帮助我！:-)

根据官方文档，

defineProps和编译器宏只能defineEmits在. 它们不需要导入，并且在处理时被编译掉。<script setup><script setup>

<!-- HelloWorld.vue -->
<template>
  <h1>{{ props.message }}</h1>
</template>

<script setup>
// import { defineProps } from 'vue';
const props = defineProps({
  message: {
    type: String,
    required: true,
  }
});
</script>