Vue communication from Todolist Middle School Communication

Simple Todolist

Implement a simple Todolist, when I entered the content, click Submit Auto Add below, as shown below:


submit {{item}}
  • Let VM = New Vue ({EL: '# app', data: {list: [], inputval: ''}, methods: {clickbtn ) {this.list.push (this.inputval) InputVal = '' '}}}
When I entered the content in the input box, click Submit , VUE will automatically render content in the page, how is it implemented?
We all know that VUE is an MVVM framework, so that developers focus on data changes, there is no need to pay attention to DOM, so its core is a VM layer, that is, rendering this part does not require developers to consider.
Cyclic V-for

The V-FOR instruction is the API provided by Vue, which can achieve cyclic addition

V-for = “item in list”

Add the data cycle in the list to the page, the value is item

So when I When you click Submit, you only need to get the input box.The value, then Push to List, what we see is an addition.
Binds V-model
How to get a value in the input box becomes a problem, before you get the value in the input box before you don’t use VUE , Very simple, use $ (input) .val () can be easily obtained.
After using Vue, the DOM should not be operated to obtain the value. Vue is definitely taken into account, providing an API

V-model = “INPUTVAL” When using this command for the first time, I stepped on a pit, I added a double parentheses in INPUTVAL, which caused no reactions in the page. This is no need to add brackets. When the rendering mode needs to be provided with the temptation

, a simple TODOLIST is already implemented.

 Each LI is actually a component, we can use the components to develop   global components: 


Vue.Component (‘ Todolsit ‘, {Props: [‘ Content ‘], Template: `


`,}) Let VM = new Vue ({EL:’ #App ‘, Data: {List: [ ], INPUTVAL: ”}, methods: {clickbtn () {THIST.PUSH (this.inputval) this.inputval = ”}}}

Cubed with VUE to create a global component , The name of the component Todolist needs to implement in TODO-LIST in the template, the size is lowercase, the intermediate-connection.
LET Todolist = {Props: ['Content'], Template: ` {content}}
  • `,}}
  • `,}} `,}}
    `,}} `,}}




    `,} [{{{{{{{{{{{{{{{{{a aPP ‘, Data: {List: [], InputVal: ”}, Component: {// Register component Todolist}, methods: {clickbtn () {this.list.push (this.inputval) this.inputVal = ”}}}
    Component: {TODOLIST}
  • After using the component, it will involve data communication, generally there are two types:

    component in the assembly, How to know

     Parent-> Sublayer Communication   
    The above function has been implemented, but there is no data in the component, If you pass the data in the box to the child component.

    Obtain data in subcomposition, or use V-FOR loops, use V-BIND binding data, and the data acquired by PROPS in the component

    • Let Todolist = {Props: [‘Content’], Template: `

    `, // Content is related data}

    Parent-> subcomponent communication implements adding data to the component, if you want to delete one in the sub-component?

      Sub-> parent component communication, Vue provides a $ EMIT () method, using V-ON in the component Command binding event   
  • submit

    Vue.component (‘Todolist’, {Props: [‘Item’, ‘INDEX’], Template: ` {{{}}
    `, methods: {handleItemClick () {THIS.Emit (‘delete’, this.index)}}}) let vm = new Vue ({el: ‘#app “, data: {list: [], inputval:’ ‘}, methods: {clickbtn () {this .list.push (this.inputval) this.inputval = ”}, handleitemdelete (index) {this.list.splice (index, 1)}}})

     The first parameter is the event name, the second parameter is the parameter to pass to the parent element  
      '// Binding event is Click, the function that needs to be executed is HandleItemClickMethods: {// written in the component HandleItemClick () {this. $ EMIT (' delete ', this.index) }}}
    Father Controls
  • HandleiteMdelete (INDEX) {// Write In the Vue instance this.list.splice (INDEX, 1)}
    can be implemented by communication between the parent subcomponentsData Transmission Problem between Father -> Sub -> Parent.

    The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
    © Copyright Notice
    Just support it if you like
    comment Grab the couch

    Please log in to comment