乐趣区

关于vue.js:vue父子组件之间通信

  • 子组件调用父组件办法

    <!-- 父组件 -->
    <!-- 留神命名时不要用驼峰命名,否则不失效 -->
    <search @search-data='searchData'></search>
    
    // 子组件
    this.$emit('search-data',6666)
  • 父组件调用子组件
  • 办法 1

    • 通过ref
    <!-- 父组件 -->
    <!-- 在引入的子组件上标注 ref -->
    <jPicker ref="jpicker" />
    // 父组件
    // 父组件间接调用 ref 命名加上子组件的办法 changenSel
    this.$refs.jpicker.changenSel(-1);
  • 办法 2

    • 通过 $emit、$on 配合应用
    <!-- 父组件 -->
    <Button @click="handleClick"> 点击调用子组件办法 </Button>
    <jPicker  ref="jpicker" />
    // 父组件
      handleClick() {this.$refs.child.$emit("childMethod")    // 子组件 $on 中的名字
            },
    // 子组件
      mounted() {this.$nextTick(function() {this.$on('childMethod', ()=>{console.log('我是子组件办法');
                });
            });
         },
退出移动版