父子组件相互通信方法详情

1，子组件通过 $emit 调用父组件的 method

// 父组件中定义 @updateInfo 调用的方法

methods: {

  updateInfo() {

    xxxxxx

  },

},

// 子组件在某个方法中进行调用，例如

saveInfomation() {

  this.$emit('updateInfo');

},

2，父组件通过 prop 向子组件进行传值

// 父组件内定义传递给子组件的值 userInformation

data() {

  return {

messageToHelloWorld:'我是父组件向下传递的信息332112',

      };

},

// 子组件内通过 prop 获取父组件传递的值 userInformation

export default {

  name: 'HelloWorld',

  props: ['message1'],

  data () {

    return {

    }

  }

created() {

          console.log(this.message1)

        },

}

3,父组件通过 $refs 调用子组件的 method

childMethod();是子组件 里面定义的方法

method: {

  parentMethod() {

    this.$refs.son.childMethod();

  },

},

4,子组件向  父组件 穿参数

这是子组件定义一个方法

点击

  //方法

        methods: {

//向父组件传参

          beijing(){

//emitclick 父组件自定义的 事件名字

            this.$emit('emitclick','子组件过来的')

}

父组件。

@emitclick="emitclick" 自定义事件名字

  //方法

        methods: {

//自定义事件名字 接受子组件穿过来的参数

emitclick(data){

            console.log(data)

          },

}