Home > Article > Web Front-end > Analysis on the strength of value transfer between Vue components

Analysis on the strength of value transfer between Vue components

王雪芹Original: 2020-08-11 18:08:491485browse

When we get started with Vue, we have to mention components. In some cases, components need to pass values to each other. For example, a parent component needs to pass a value to a child component, and a child component needs to pass a value to the parent component. Then the following Use a strength to elaborate.

Effect:

We want to achieve such an effect. After entering text in the input box and clicking the submit button, the corresponding input content will appear below. If you click on something, the content disappears.

As shown below, for example, when we click 2, 2 will disappear

Analysis on the strength of value transfer between Vue components

##Analysis:

1. First, we will get the input content, collect all the input content into an array, and loop the data in

. Because

have the same structure, we can make

into a component. The array is in the parent layer, and the defined

component is the child Component, this means that the parent component passes values to the child components and passes the data to the child components.

2. Click

an option and the option will disappear. Then the

component will notify the parent component upwards, which one is currently clicked, and which one of the array data of the parent layer needs to be removed. This is the sub-component passing the value to the parent component.

<div id="root">
        
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
        
        <ul>
            <todo-item v-bind:content="item" 
                       v-bind:index="index" 
                       v-for="(item,index) in list"
                       @delete="handleItemDelete"
            ></todo-item>
        </ul>
    </div>

    <script>

        var TodoItem={
            props:[&#39;content&#39;,&#39;index&#39;],
            template:"<li @click=&#39;handleItemClick&#39;>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit(&#39;delete&#39;,this.index);
                }
            }
        }

        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            components:{
                &#39;TodoItem&#39;:TodoItem
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1);
                }
            }
        })
    </script>

Through the code, it is not difficult to find that the main value passed from the subcomponent to the parent component is here:

this.$emit(&#39;delete&#39;,this.index);

In addition, it should be noted that in Vue, everything starting with $ is called vue Instance attributes or methods, in addition to this, you also need to pay attention to some abbreviations, such as and

The above is the detailed content of Analysis on the strength of value transfer between Vue components. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is json dataNext article：What is json data

See more

Analysis on the strength of value transfer between Vue components

Related articles