Analysis on the strength of value transfer between Vue components

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:

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('delete',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 Submit and Submit has the same effect.

Related recommendations: "

javascript Advanced Tutorial"

The above is the analysis of the strength of value transfer between Vue components, promotion and salary increase, everyone, come on!

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!