vue子组件Function参数

首先建立关系：父组件中做以下操作：

1、父组件中引入子组件

import Child from "@/components/Child.vue";

2、注册组件

<script>
import Child from "@/components/Child.vue";// 1、引入组件

export default {
    components:{
        Child// 2、注册组件
    },
    data(){
        return {}
    },
    created(){},
    methods:{}
}
</script>

3、将组件放到页面中

<template>
  <div>
    <Child></Child>// 子组件
  </div>
</template>

一、父子传参：

Parent.vue 向 Child.vue 传递参数（自定义属性）

1、在父组件中的子组件标签上自定义属性

<template>
  <div>
    <Child :nameStr="name_str"></Child>// 子组件
  </div>
</template>

<script>
export default {
    data(){
        return {
            name_str:'hhh'
        }
    }
}
</script>

2、然后子组件中用props接受 父组件的属性名

<template>
  <div>
     <div>{{nameStr}}</div>
  </div>
</template>

<script>
export default {
  props:['nameStr'],
  data(){
    return {
      
    }
  },
  created(){
    console.log(this.$props.nameStr);//hhh
  },
  methods:{

  }
}
</script>

<style>

</style>

补充内容：props如果是对象的话，格式如下：

props:{
    nameStr:{
      type:String,// 类型String、Number、Boolean、Array、Object、Date、Function、Symbol,
      //type:[String, Number],多个可能的类型可写为数组格式
      default:'zzz' // 默认值
      // 对象或数组默认值必须从一个工厂函数获取
      //default: function () {
      //  return { message: 'hello' }
      //},
      required: true, // 必填
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },

注：父组件中-子组件标签不写属性，子组件显示默认值；

二、子父传参：

Child.vue 向 Parent.vue  传递参数（自定义事件,然后用$emit('自定义触发事件'，传递参数)来进行参数的传递）

1、在父组件中的子组件标签上自定义事件

<template>
  <div>
    <Child @getColor="color_str"></Child> // 子组件
  </div>
</template>

2、在父组件中定义，事件的方法

<script>
import Child from "@/components/Child.vue";

export default {
    components:{
        Child
    },
    data(){
        return {}
    },
    created(){},
    methods:{
        //自定义事件
        color_str(data){
            console.log(data);// 接受子组件传递的参数
        }
    }

}
</script>

3、在子组件中写要传递的内容。（放在方法中，让它由某个按钮触发，从而向父组件传递数据）

<script>
export default {
  props:[],
  data(){
    return {}
  },
  created(){
    this.$emit('getColor','#ff1234') //参数:【事件触发器的名称（需要用引号包起来）】【要传递的参数】
  },
  methods:{}
}
</script>

4、此时子组件已成功向父组件发送了参数；

//父组件
methods:{
        //自定义事件
        color_str(data){
            // data是形参，用来接受子组件的参数
            console.log(data);// #ff1234
        }
}

 三、非父子传参：

借助eventBus($emit和$on的事件必须在一个公共的实例上，才能够触发。)

1、main.js里新加bus作为一个公共的实例,也可以在原型上挂载，也可以创建一个EventBus.vue，除了在原型挂载，都要在组件中引入公共的实例；

import Vue from 'vue'

Vue.prototype.$EventBus = new Vue();// 挂载到原型上

export var bus = new Vue();// 或者是导出变量

new Vue({
  render: h => h(App)
}).$mount('#app')

2、发送方组件(由事件触发，去执行发送操作)

<template>
  <div>
    <el-button size="mini" @click="toC1">向c1发送内容</el-button>
  </div>
</template>

<script>
import { bus } from "@/main.js"; // 引入公共的实例
export default {
    methods:{
        // 触发事件
        toC1(){
            let vv = 'sun'
            //this.$EventBus.$emit('hhhh',vv)
            bus.$emit('hhhh',vv)
        }
    }
    
}
</script>

3、接受方 接受参数

<script>
import { bus } from "@/main.js"; // 引入公共的实例
export default {
  data(){
    return {
      aa:''
    }
  },
  created(){
    //this.$EventBus.$on('hhhh',(bb)=>{
    //    this.aa=bb;
    //})
    bus.$on('hhhh',(bb)=>{
        //回调函数获取值
        this.aa=bb;
    })
  },
  methods:{}
}
</script>