Передача функций в качестве свойств в vue js

Я пытаюсь передать editTodo в качестве функции реквизита от родительского app.vue к дочерним компонентам ... Компонент TodoItem.vue есть список элементов, а время возвращается в основной пользовательский ввод полей newTodo и dateTime. На самом деле, я новичок в изучении Vue js, и у меня есть немного знаний о передаче пропсов между компонентами.

      <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(),
        //   editing: false,
        //   completed: false,
        // },
        // {
        //   id: 1,
        //   title: "",
        //   date: new Date(),
        //   editing: false,
        //   completed: false,
        // },
      ],
    };
  },
 

  methods: {
     editTodo(index, newTodo, dateTime){
     , ' dateTime ', dateTime)
    //  this.editItems = {
    //    id,
    //    title,
    //    time,
    //  }
      this.todo = newTodo
      this.todo = dateTime
      this.selectedIndex = index
      this.editing = true
    },

В компоненте TodoItem.vue есть список элементов и время, возвращаемое к основному вводу пользователя в поля newTodo и dateTime. *** _ 2_

  • `**

    --> {{todo.title}} {{todo.time}}
    </div>
          <div class="remove-item" @click="removeTodo(index)">
              &times; 
          </div>
           <div class="edit-item"  @click="eiditTodo(index)"
           >
              <i class="fas fa-edit" id="edit"></i>
           </div>
    

экспорт по умолчанию {name: 'todo-item', props: {todo: {type: Object, required: true,}, removeTodo: {type: Function, required: true,}, index: {type: Number, required: true ,},

},
data(){
    return{
        'id': this.todo.id,
        'title': this.todo.newTodo,
        'time': this.todo.dateTime,
      }

methods: 
   
    getEdit(){
     
        this.$emit('editTodo', this.selectedIndex)
    }

**`


person khawar shah    schedule 12.11.2020    source источник
comment
Отвечает ли это на ваш вопрос? Как передать функцию как опору дочернему компоненту и вызвать ее оттуда во Vue?   -  person Zim    schedule 12.11.2020


Ответы (1)


Вместо того, чтобы передавать функцию в качестве опоры дочернему компоненту для ее запуска, вы должны вместо этого испустить событие из дочернего компонента и выполнить функцию в родительском компоненте.

Чтобы испустить событие из дочернего компонента

@click="$emit('edit-todo')"

А затем в родительском компоненте

<div @edit-todo="editTodo">
</div>

В качестве альтернативы вы можете просто определить функцию editTodo в компонентеTodoItem и вызвать ее напрямую.

person spesthecat    schedule 14.11.2020