zoukankan      html  css  js  c++  java
  • [Vue] Parent and Child component communcation

    By building components, you can extend basic HTML elements and reuse encapsulated code. Most options that are passed into a Vue constructor can be passed into a component. Each instance of a component has an isolated scope. Data can only be passed one direction and it must be from parent to child using props. To communicate with the parent element, use the $emitmethod.

    Child component:

    <template>
        <section>
            <h1>Child component {{name }}</h1>
            <div>
                Child button: <button @click="insideInc">Inc from inside {{insideCounter}}</button>
            </div>
        </section>
    </template>
    
    <script>
        export default {
            name: 'item-description',
            props: ['counter', 'name'],
            data: function() {
                return {
                    insideCounter: this.counter
                }
            },
            methods: {
                insideInc() {
                    this.insideCounter += 1;
                    this.$emit('total', this.insideCounter);
                }
            }
        }
    </script>

    From parent, we will receive:

    props: ['counter', 'name'],

    And we rename 'counter' from parent to 'insideCounter':

            data: function() {
                return {
                    insideCounter: this.counter
                }
            },

    If we want to tell parent component, we can use '$emit':

    this.$emit('total', this.insideCounter);

    From parent component:

            <item-description
                v-bind:counter = "counter"
                v-bind:name = "message"
                @total="getTotalFromChild"
            ></item-description>
    <script>
    
      import ItemDescription from '../components/item-description';
        components: {
            ItemDescription
        },
    
    ..
    
    </script>
  • 相关阅读:
    bzoj4543 长链剖分
    tarjan算法
    uoj36 玛里苟斯 高斯消元做法
    狄利克雷卷积
    斜率优化
    将一个工作簿拆分为多个工作表
    如何制作Excel斜线表头
    逻辑函数(IF函数)
    逻辑函数(AND,OR,NOT)
    Excel中提取英文,数值和编码(LEN函数)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6347417.html
Copyright © 2011-2022 走看看