vue父子组件（两个vue页面）互相传值

最近在工作中遇到了工作流，需要父子组件之前互相传值。

父组件的值传到子组件，用于显示。

子组件的值传到父组件，充当发送请求参数。

先说一下父组件给子组件传值。

例如这是子组件：policerName

这是父组件显示子组件，然后，父组件会把policerName,传入到子组件，

<policerName

          :policer-name="policerName"

        />

<el-input v-model="name"></el-input>

<script>
export default {
//  接收父組件傳來的值
props:["policerName"],

data: function () {
    return {
      name:this.policerName
    };
  },
}
</script>

子给父传值

子组件传值给父组件，父组件去监听子组件的变化

//子组件内容

<el-input v-model="name" @input="transPolicerName" placeholder="请输入名称"></el-input>

<script>
export default {
data: function () {
    return {
      name:this.policerName
    };
  },
},
 methods: {
//transPolicerName主要是这个事件
    transPolicerName(){
      this.$emit("ListenPolicerName",this.name);
    },
}

</script>

 此时policerName就是有值的。

<policerName
          @ListenPolicerName="transPolicerName"
        />
  methods: {
    transPolicerName(name) {
      this.policerName = name;
    },
}