vue js에서 소품으로 기능 전달

vue js에서 소품으로 기능 전달

부모 앱에서 editTo도 소품 기능으로 전달하려고 해.하위 구성 요소...토도아이템.vue 구성 요소에는 newToDo 및 dateTime 필드의 주 사용자 입력으로 반환되는 항목 및 시간 목록이 있다.사실, 나는 Vue js의 새로운 학습자야. 거기에는 패스 소품 b/w 컴포넌트 커뮤니케이션에 대한 약간의 지식이 있어.

      <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
    },

토도아이템.vue 구성 요소에는 newToDo 및 dateTime 필드의 주 사용자 입력으로 반환되는 항목 및 시간 목록이 있다.***enter code here

• `**

  -->{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>
  

내보내기 기본값 { 이름: 'todo-properties', proposes:{to:{type:개체, 필수: true, }, removeToDo:{ 유형:함수, 필요:true, }, 색인:{ 유형:숫자, 필요: true, }

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

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

**`

기능을 실행하기 위해 하위 구성요소에 소품으로 전달하지 말고, 대신 하위 구성요소에서 이벤트를 내보내고 상위 구성요소에서 기능을 실행해야 한다.

하위 구성 요소에서 이벤트를 내보내려면 다음과 같이 하십시오.

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

그리고 부모 구성 요소에서

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

또는, 그냥 정의하면 된다.editTodo의 기능을 하다.TodoItem구성 요소 및 직접 호출하십시오.

참조URL: https://stackoverflow.com/questions/64805936/passing-functions-as-props-in-vue-js