zoukankan      html  css  js  c++  java
  • vue入坑教程(三)vue父子组件之间互相调用方法以及互相传递数据

    1、父组件调用子组件的方法

    父组件:

    <template>
        <div>
            <button v-on:click="clickParent">点击</button>
            <child1 ref="child1"></child1>
        </div>
    </template>
    
    <script>
        import Child1 from './child1';
        export default {
            name: "parent",
            components: {
                child1: Child1
            },
            methods: {
                clickParent() {
                    // this.$refs.child1.$emit('click-child', "high");
                    this.$refs.child1.handleParentClick("ssss");
                }
            }
        }
    </script>

    子组件:

    <script>
        export default {
            name: "child1",
            props: "msg",
            methods: {
                handleParentClick(e) {
                }
            }
        }
    </script>

    2、子组件调用父组件的方法

    父组件:

    <template>
          <div class="wrapper">
                <cp_action @parentMethod="macSelect"></cp_action>
          </div>
    </template>
    <script>
    import ../components/action  //引入子组件
    export default{
        components:{
            cp_action
        },
        method:{
            macSelect(){
                //方法体
                alert(123);
            }
        }
    }
    </script>

    子组件:

    <template>
        <div class="bet-action">
            <span class="mac-select" @click="childMethod">机选</span>
        </div>
    </template>
    <script>
        export default{
          methods: {
              childMethod() {
                  console.log('请求父组件方法');
                  this.$emit('parentMethod');  //使用$emit()引入父组件中的方法
              }
          },
        }
    </script>

    3、父组件向子组件传递数据(可以通过props属性来实现)

    父组件:

  • 相关阅读:
    高可用keepalived的抢占式与非抢占式
    keepalived搭建
    高可用概念
    Nginx优雅显示错误页面
    Nginx调整上传文件大小
    nginx的root和alias区别
    nginx的include
    每日总结2.18
    每日总结2.17
    每日总结2.16
  • 原文地址:https://www.cnblogs.com/wangming1002/p/9172303.html
Copyright © 2011-2022 走看看