美文网首页
vue 父组件传递自定义参数及自定义方法给子组件

vue 父组件传递自定义参数及自定义方法给子组件

作者: 嗯哼曼 | 来源:发表于2020-03-14 17:40 被阅读0次

现有一个组件,组件名:search。里面有一个input的值及绑定方法需要由父组件来决定。放在不同的父组件可能需要实现的数据及功能不一样,所以不能写成固定方法。
比如参数 tag 在用户模块,tag需要是“用户”,searchFun方法需要查询所有用户;在方案模块,tag需要是“方案”,searchFun方法需要查询所有方案。

search子组件代码如下:

<template>
    <div>
      <input type="button" :value="tag" v-on:click="searchFun" class="minInput" />
    </div>
</template>
<script>
export default {
  name: "search",
  data() {
      aa: 1,
      bb: 2
  },
  props: ["tag"],
  mounted() {
   
  },
  methods: {
   searchFun:function(){
      this.$emit("search",this.aa,this.bb);
    }
  }
};
</script>

这段代码内:
数据绑定使用::value="tag" ,tag是绑定的参数名。
方法绑定使用:v-on:click="searchFun" ,searchFun是方法名。

调用子组件的父组件代码如下:

<template>
  <div>
      <search :tag="tagRecord" v-on:search="recordFun"></search>
  </div>
</template>
<script>
import search from "../components/search";
export default {
  name: "index",
  data() {
    return {
      tagRecord:"查询方案记录"
    };
  },
  components: {
    search
  },
  methods: {
    recordFun(aa,bb){
       console.log(aa);
       console.log(bb);
    }
  }
};
</script>

先import子组件后,在components内写上引入的组件名search。
调用子组件的时候需要写入父组件需要传的tag参数值,及父组件需要传给input触发事件的方法名。
写入子组件的时候写法:
<search :tag="tagRecord" v-on:search="recordFun"></search>
这里传给tag的值就是父组件中tagRecord的值;
传给search方法的值就是父组件中recordFun()方法。

注意:
v-on:search需和子组件中的this.$emit("search",xx);search一致。this.$emitsearch是自定义方法的方法名,xx是子组件传给父组件的参数,v-on:search="recordFun"则是指父组件中的recordFun方法绑定等于search方法。

相关文章

  • vue使用v-model实现父子组件间通信

    前言 vue父子组件之间的通信方式: 父组件到子组件:通过props传递数据; 子组件到父组件:通过自定义事件实现...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • vue组件学习2

    一.子组件向父组件传递数据 方法:子组件绑定子组件的自定义事件,但事件处理函数绑定父组件的方法 1.

  • Vue组件之间的数据传递

    1、父子组件传递父组件传给子组件通过props方法接收参数子组件传给父组件:$emit方法传递参数2、非父子组件创...

  • $emit用法子组件向父级组件传值

    $emit是子集组件触发父级组件的函数方法,由此向父级组件传递参数值 子组件: fdWord.vue 方法 thi...

  • vue组件之间通信

    vue父组件给子组件传参使用props子组件给父组件传参使用时间派发$dispatch兄弟组件之间传递参数使用vuex

  • vue之组件通信props/$ref和$emit

    prop----父组件向子组件传递数据。如自定义标题和内容$ref----父组件调用子组件的属性和方法。 $emi...

  • 组件通信

    组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信 自定义事件--子组件给父组件传递数据 子组件$emit(...

  • Vue组件通信方法总结

    父传子父组件通过自定义属性给子组件传值,子组件用props接收 子传父父组件在子组件标签上自定义事件,子组件通过$...

网友评论

      本文标题:vue 父组件传递自定义参数及自定义方法给子组件

      本文链接:https://www.haomeiwen.com/subject/gubirhtx.html