JS——vue 父子组件通信

Posted 2020-12-02 cnloop

父子组件之间的通信属于传递私有数据，比较容易理解

实现方式

• 父组件向子组件传值
  • 直接在子组件的标签上绑定属性
  • 子组件声明 props 来接收父组件传值的属性
• 子组件向父组件传值
  • 直接在子组件的标签上绑定方法
  • 子组件通过 $emit 方法调用父组件绑定过来的方法，并通过传递参数的形式达到传值的目的，这里的参数个数可以是多个，不固定

具体案例

• props

<!--父组件-->
<template>
    <span>父组件：</span>
    <input type="text" v-model="pVal">
    <son :textP=‘pVal‘></son>
</template>
<script>
export default {
  data() {
    return {
      pVal: 12
    };
  }
</script>

<!--子组件 son-->
<template>
    <div class="props">
        <span>子组件：</span>
        <input type="text" v-model="textP">
    </div>
</template>
<script>
export default {
  props: ["textP"]
};
</script>

• $emit

<!--父组件-->
<template>
    <son @pMethod=‘show‘></son>
</template>
<script>
export default {
  data() {
    return {
      pVal: 12
    };
  },
  methods: {
    show(data) {
      this.pVal = data;
    }
  }
};
</script>

<!--子组件-->
<template>
    <div class="props">
        <span>子组件：</span>
        <button @click="change">点击改变父组件的值</button>
    </div>
</template>
<script>
export default {
  methods: {
    change() {
      this.$emit("pMethod", 19);
    }
  }
};
</script>

总结分析

• 关于子组件向父组件传值，其形式上与 jsonp 类似，服务器将想要传递的数据通过一个 callback 方法传参的形式最终达到跨域传值的目的

• 其实这样的形式也十分类似 winform 里面的不同窗口之间的传值，也是通过方法传递参数