Skip to main content

父执行子组件-子执行父

传递数据​

props和emit:父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit: 父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit:父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit事件

parent,parent,parent,children获取当前组件的父组件和当前组件的子组件

attrs和attrs和attrs和listeners 。

父组件通过provide提供，子组件通过inject注入变量

$ref获取实例

eventBus平级组件数据传递

Vuex

ref 实现通信​

1.如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。 2.如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

注意： parent和children是获取组件和子组件的实例，只不过$children是一个数组集合，需要我们记住组件顺序才可以.

父-->子​

父组件：

<template>
    <div>
        <div @click="click">点击父组件</div>
        <child ref="child"></child>
    </div>
</template>

<script>
    import child from "./child";
    export default {
        methods: {
            click() {
                this.$refs.child.$emit('childMethod','发送给方法一的数据') // 方法1:触发监听事件
                this.$refs.child.callMethod() // 方法2:使用 ref,父执行子
            },
        },
        components: {
            child,
        }
    }
</script>

子组件中:

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

<script>
    export default {
        mounted() {
            this.monitoring() // 注册监听事件
        },
        methods: {
            monitoring() { // 监听事件
                this.$on('childMethod', (res) => {
                    console.log('方法1:触发监听事件监听成功')
                    console.log(res)
                })
            },
            callMethod() {
                console.log('方法2:直接调用调用成功')
            },
        }
    }
</script>

子执行父方法:第一种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。​

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod','这是子组件===>父组件的值');
      }
    }
  };
</script>

子执行父方法:另一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法​

取值：第二种方式: 使用$parent.获取父组件对象，然后再获取数据对象,子组件代码:
mounted() {
    this.msg22 = this.$parent.msg2;
}

父组件

<template>
  <div>
    <child />
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>