vue父子/兄弟传参数函数

[lengziyu]

父子组件：

在父组件指定点击事件后向子组件传递参数并调用子组件的事件： 给父组件写一个ref属性，父组件可以通过ref拿到子组件中的数据和方法（即下面例子的say方法），这样在父组件中就可以触发子组件的事件了。

# 父组件
<template>
  <div>
    <children ref="children" :formData="formData"></children>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script>
  import children from './children.vue'

  export default {
  data () {
    return {
      formData:{
          name:'',
          mobile: ''
      }
    }
  },
  methods:{
    handleSubmit(){
        this.$refs.children.say();
    }
  },

  components:{
    'children': children
  }

}
</script>

子组件
<template>
  <div class="children">
    我是子组件
  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          formData: {
              type: Object,
              default: () => {
                  return {}
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          say(){
              console.log(this.childrenSay);
          }
      }
  }
</script>

[lengziyu]

子父传参，通过this.$emit方法传值。

子组件children：

  methods: {
    change(val) {
        this.$emit('getVal', val)
      }
  },

父组件：

<template>
<Children @getVal="getChildrenVal" />
</template>

<script>
import Children from './children'
  export default {
      compments: { Children },
      methods: {
          getChildrenVal(val){
              console.log(val);
          }
      }
  }
</script>

[lengziyu]

父组件通过异步获取数据再传给子组件

应用场景比如在后台管理的编辑，要把数据丢回去的时候。 父组件的数据是异步获取的，而子组件一开始就会渲染，如果通过上面的方法传，数据还没返回来就传过去，子组件是获取不到值的。 最简单的办法就是让子组件条件渲染，当有数据的时候才渲染，

子组件：
<div v-if="flGoods">
 有数据时渲染
</div>

但是如果你的编辑和新增是同一组件（通常都是），那么新增默认没数据，就不渲染了， So，通过watch来监听： 子组件：

  props: ['flGoods'],
  data() {
        return{
          flGoods: null
        }
      },
      watch: {
        floorGoods(val) {
          this.flGoods = val;
          console.log(val);
        }
   }