标签: vue-props

我试图将 editTodo 作为 props 函数从父 app.vue 传递到子组件... TodoItem.vue 组件有一个项目列表，时间返回到 newTodo 和 dateTime 字段的主要用户输入。实际上，我是 Vue js 的新学习者，对组件通信的传递 props 有一点了解。

      <template>
  <div id="app" class="container">
    <TodoInput :addTodo="addTodo"
    :updateTodo="updateTodo" 
    
    />

    <todo-item v-for="(todo, index) in todos" 
    :key=todo.id 
    :todo=todo 
    :index =index 
    :removeTodo="removeTodo"
    :editTodo="editTodo" /> 
    
  </div>

  
 
</template>



<script>
import TodoInput from "./components/TodoInput.vue";
import TodoItem from "./components/TodoItem.vue";
 
export default {
  name: "App",
  components: {
    TodoInput,
    TodoItem,
  
  },
  data() {
    return {
     
      editing:false,
      editItems:{},
      
      
      todos: [
        // {
        //   id: 1,
        //   title: "",
        //   date: new Date(),
        // …

我尝试定义类型为 Array 的组件 props

但它不起作用...

import { Person } from '...'
export default defineComponent({
    props: {
        people: Array<Person>
    }
})

export class Person {
...
}

如何正确申报？

我有下一个代码：

HTML：

<p @click="changeForm">Iniciar sesion</p>

JS

export default {
   name: "Register",
   props: {
      changeForm: Function,
   },
   setup() {
      //How can i call props changeForm here???
   }
}

我如何从 JS 调用我的 props 函数？另一种方法是触发点击我的 p 元素，这可能吗？

我正在使用 vue 3。我已经用 this.changeForm 和 props.changeForm 进行了测试，但没有成功。

当父组件的数据更新并通过 prop 时，我试图更新 prop 值。当我向下传递父值时，父值始终会更新，但不会在子组件中更新或重新渲染。它会在第一次访问子组件时传递给 prop，但不会在父组件中更新数据时传递给 prop。

下面是父组件：

<script setup>
    import { inject, watchEffect, ref } from "vue";
    import ChildComponent from "@/components/ChildComponent.vue"
    const { state } = inject("store");
    const cart = ref(state.cart);

    watchEffect(() => (cart.value = state.cart));

</script>
<template>
      <ChildComponent
       v-for="(item, index) in cart?.items"
       :key="index"
       :cartItem="item"
      />
</template>

下面是子组件（仅在第一次加载时记录，不再加载）：

<script setup>
    import { ref, watchEffect } from "vue";
    
    const { cartItem } = defineProps({
      cartItem: !Object
    });

    const item = ref(cartItem);

    watchEffect(() => {
      console.log(item.value)
    });
        
</script>

我尝试以多种方式使用 Watch，但它无法检测旧值或新值。它不记录任何输出

使用 …

我将一个值列表从父组件传递给它的子组件，并希望接收所有值，但我只接收最后一个。

这是父组件的代码：

     <app-spider-web
     v-for="skill in skills"
     :name="skill.name"
     :required="skill.required"
     :vMode1="skill.vMode1"
     ></app-spider-web>

   ...       


   skills: [
      {
        name: 'Frozen Yogurt',
        required: 1,
        vMode1: ''
      },
      {
        name: 'Ice cream sandwich',
        required: 3,
        vMode1: ''
      },
      {
        name: 'Eclair',
        required: 1,
        vMode1: ''
      }
    ]

这是子组件的代码：

props:['name','required','vMode1']

这样我一个一个接收数据，如果我想打印例如'name'，它只显示列表中的姓氏'Eclair'，而我想在子组件中有一个数组，其中包含所有名称。最好的方法是什么？

我注意到 prop 突变（Vue 2.6）有一些奇怪的地方。

应避免直接在子组件中改变 props，否则会触发以下著名的警告

“避免直接改变道具，因为该值将被覆盖......”

因此，如果在我的父组件中我有一个类似的数据

exemple: "Hello World"

我将其作为道具传递给子组件。如果在那个子组件中我做了类似的事情

this.exemple = "Hello World!"

我收到警告。很公平。现在我注意到，如果父级中的数据是像这样的对象

exemple : {message : "Hello World"}

我在孩子身上做了类似的事情

this.exemple.message = "Hello World!"

这不会触发任何警告，而且父组件中的数据会更新

我想知道为什么。为什么在一种情况下 prop 突变会传播到亲本，而在另一种情况下则不会？它可能与 javascript 如何存储这些变量有关吗？使用这个技巧是个好习惯吗？

我有一个带有 propvalue和 prop 的组件range。range类型为Boolean且默认为false. 当isvalue时应为类型，如果is则为类型。StringrangefalseArrayrangetrue

目前，我只知道如何指定它可以是orvalue类型，但不知道如何向它附加任何类型的条件：StringArray

export default {
  props: {
    value: {
      type: [String, Array]
    },
    range: {
      type: Boolean,
      default: false
    }
  }
}

这可能吗？

我正在尝试使用文档中v-model描述的模式将选择包装在 Vue 自定义组件中。

我面临的问题是我的自定义选择组件收到以下错误消息：

[Vue warn]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，根据 prop 的值使用数据或计算属性。道具被变异：“value”

在发现

--->

但是，当我创建value数据属性时，我失去了预期的功能。也就是说，当绑定值更改时，选择框不会更新。双向绑定丢失。

在不发出警告的情况下维持我期望的行为的正确方法是什么？

这是演示该问题的交互式示例（最好在全屏下查看）。

Vue.component('dynamic-select-ex1', {
  template: '#dynamic-select-template',
  props: ['value', 'options'],
  methods: {
    changed() {
      // custom input components need to emit the input event
      this.$emit('input', event.target.value)
    },
  },
})

Vue.component('dynamic-select-ex2', {
  template: '#dynamic-select-template',
  props: ['options'],
  data() {
    return {
      value: null,
    }
  },
  methods: {
    changed() {
      // custom input components need to emit the input event
      this.$emit('input', event.target.value)
    },
  },
})

let example = …

我试图在VUE 3中传递一个emit prop，每次传递它时我仍然得到错误，并且prop无法切换。

手风琴.vue

 <template>
    <div class="flex" @click="toggleInfo()">
        <slot></slot>
    </div>
 </template
    <script>
    export default {
      props: {
        value: {
          required: true
        }
      },
      setup(props, { emit }) {
        const toggleInfo = () => {
          emit('input', !props.value)
        }
        return {
          toggleInfo
        }
      }
    }
    </script>

应用程序.vue

<accordion v-model:value="isOpen">
    ...// just data
</accordion>

<script>
import { ref } from 'vue'
import accordion from '../components/Accordion.vue'

export default {
  components: {
    accordion
  },
  setup() {
    const isOpen = ref(false)
    return {
      isOpen
    }
  } …

我对 Vue 3 路由器很陌生，所以真的需要帮助。我正在尝试通过路由器链接传递道具。

所以，我有一个组件 Post，其中支柱是一个对象。

后vue

export default defineComponent({
  name: 'Post',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

我有一个组件 EditPostForm，其中应该与 Post 组件中的对象完全相同。

EditPostForm.vue

export default defineComponent({
  name: 'EditPostForm',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

这就是 Post 组件中的路由器链接。

后vue

<router-link
  class="..."
  :to="{
     path: '/post/edit',
     props: post,
     query: { post: post.id },
   }"
   >Edit
</router-link>

路由器/index.ts

{
    path: '/post/edit',
    name: 'Edit Post',
    component: EditPostForm,
    props: Object as PropType<Post>,
},

我收到一个错误 …