title: Passing Functions as props in vue js
body: <p>I'm trying to pass editTodo as props function from parent app.vue to child components ...
  TodoItem.vue component there is a list Of Items and Time returns to main user input of newTodo and dateTime field. Actually, I'm a new learner of Vue js there is a little knowledge of pass props b/w the components communication.</p>
  <pre><code>      &lt;template&gt;
    &lt;div id=&quot;app&quot; class=&quot;container&quot;&gt;
      &lt;TodoInput :addTodo=&quot;addTodo&quot;
      :updateTodo=&quot;updateTodo&quot; 
      
      /&gt;
  
      &lt;todo-item v-for=&quot;(todo, index) in todos&quot; 
      :key=todo.id 
      :todo=todo 
      :index =index 
      :removeTodo=&quot;removeTodo&quot;
      :editTodo=&quot;editTodo&quot; /&gt; 
      
    &lt;/div&gt;
  
    
   
  &lt;/template&gt;
  
  
  
  &lt;script&gt;
  import TodoInput from &quot;./components/TodoInput.vue&quot;;
  import TodoItem from &quot;./components/TodoItem.vue&quot;;
   
  export default {
    name: &quot;App&quot;,
    components: {
      TodoInput,
      TodoItem,
    
    },
    data() {
      return {
       
        editing:false,
        editItems:{},
        
        
        todos: [
          // {
          //   id: 1,
          //   title: &quot;&quot;,
          //   date: new Date(),
          //   editing: false,
          //   completed: false,
          // },
          // {
          //   id: 1,
          //   title: &quot;&quot;,
          //   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
      },
  </code></pre>
  <p>TodoItem.vue component there is a list Of Items and Time returns to main user input of newTodo and dateTime field.***<code>enter code here</code></p>
  <ul>
  <li><p>`**</p>
   
       
                -->
               
               {{todo.title}}
               {{todo.time}}
                
  <pre><code>&lt;/div&gt;
        &lt;div class=&quot;remove-item&quot; @click=&quot;removeTodo(index)&quot;&gt;
            &amp;times; 
        &lt;/div&gt;
         &lt;div class=&quot;edit-item&quot;  @click=&quot;eiditTodo(index)&quot;
         &gt;
            &lt;i class=&quot;fas fa-edit&quot; id=&quot;edit&quot;&gt;&lt;/i&gt;
         &lt;/div&gt;
  </code></pre>
   
  </li>
  </ul>
  
  
   
  <p>export default {
  name: 'todo-item',
  props:{
  todo:{
  type: Object,
  required: true,
  },
  removeTodo:{
  type:Function,
  required:true,
  },
  index:{
  type:Number,
  required: true,
  },</p>
  <pre><code>},
  data(){
      return{
          'id': this.todo.id,
          'title': this.todo.newTodo,
          'time': this.todo.dateTime,
        }
  
  methods: 
     
      getEdit(){
       
          this.$emit('editTodo', this.selectedIndex)
      }
  </code></pre>
  <p>**`</p>