Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Vue component implementation

We learned the concept of Vue components/component values/and small examples. In the last article we practiced a progress bar.

In this article, we will continue our hands-on walkthrough of Little Chestnut, practice todolist, and optimize it

2. todoList

TodoList implementation code with comments for each step (Method 1)

<div id="box">
  <my-form :add="add" :query="query"></my-form>
  <my-list :todos="todos" :del="del"></my-list>
</div>
Copy the code
<script>
  var myForm = {
    props: ['add'.'query'].// Receive two methods passed by the parent component
    data() {
      return {
        str: ' ',}},template: 
      
 
        
       
      
 `.methods: {
      addItem(str) {
        this.add(str) // STR text box input
        this.str = ' ' // Empty the text box}},}var myList = {
    props: ['todos'.'del'].template: ` 
      
     
       
  •  {{ index }} {{ item.text }}  
    •  
      

  }

  var vm = new Vue({
    el: '#box'.components: {
      myList, myForm,
    },
    data: {
      todos: [{text: 'learning TypeScript'.flag: true},
        { text: 'Learn the Vue3 source code'.flag: true},
        { text: 'And then the whole cattle project, it was an eye-opener.'.flag: true},],},methods: {
      add(str) { // Receives data from the child component that calls this method
        this.todos.push({ "text": str, flag: true }) // Add a project
      },

      del(index) { // Receive the subcomponent data. The subcomponent calls the method del to delete according to the subscript
        this.todos.splice(index, 1)},query(str) { // Receives the child component's data. The child component calls the method query to look up the data based on STR
        this.todos.forEach((item) = > {
          if(item.text.includes(str)) {
            item.flag = true // true: found
          } else {
            item.flag = false // false indicates that the search criteria are not met
          }
        })
      }
    },
  })
</script>
Copy the code

Modify todoList for componentized implementation code and annotations for each step (Method 2)

<div id="box">
  <my-form :add="add" :query="query" @child="receive"></my-form>
  <my-list :todos="todos" :del="del"></my-list>
</div>
Copy the code
<script>
  var myForm = {
    props: ['add'.'query'].// Receive two methods passed by the parent component
    data() {
      return {
        msg: ' ',}},template: ` 
      
 
        
        
      
 '.methods: {
      addItem() {
        this.add() // Text box input
        this.msg = ' ' // Empty the text box
      },
      input() {
        this.$emit("child".this.msg) // Sends the text box input to the parent component}}},var myList = {
    props: ['todos'.'del'].template: ` 
      
     
       
  •  {{ index }} {{ item.text }}  
    •  
      

  }

  var vm = new Vue({
    el: '#box'.components: {
      myList, myForm,
    },
    data: {
      todos: [{text: 'learning TypeScript'.flag: true},
        { text: 'Learn the Vue3 source code'.flag: true},
        { text: 'And then the whole cow project, and then wow everyone! '.flag: true},],},methods: {
      add(str) { // Receives data from the child component that calls this method
        this.todos.push({ "text": str, flag: true }) // Add a project
      },

      del(index) { // Receive the subcomponent data. The subcomponent calls the method del to delete according to the subscript
        this.todos.splice(index, 1)},query(str) { // Receives the child component's data. The child component calls the method query to look up the data based on STR
        this.todos.forEach((item) = > {
          if(item.text.includes(str)) {
            item.flag = true // true: found
          } else {
            item.flag = false // false indicates that the search criteria are not met}})},receive(p) {
        this.str = p
      }
    },
  })
</script>
Copy the code