Vue组件间传参（2）---父子

目录

一、父子组件传值--.sync

二、利用v-model实现父子传参

三、ref/refs实现父子组件通信

 四、$parent和$children实现父子组件通信

---

一、父子组件传值--.sync

        众所周知，vue中是单向数据流，我们想要修改父组件传递过来的数据也只能是调用父组件中的方法进行修改，或者在父组件中进行修改，那么如何做到在子组件中直接修改父组件传递的数据呢？此时我们就需要用到修饰符.sync

父组件

<template>
    <div>
        // 子组件中需要传递的数据添加.sync修饰符
        <siteDetail
            :dialogVisible.sync="dialogVisible"
        ></siteDetail>
    </div>
</template>

子组件

export default {
    props: {
        dialogVisible: {
          type: Boolean,
          default: false
        }
    },
    methods(){
        changeState(){
            // 此时会直接改变父组件中dialogVisible的value
            this.$emit('update:dialogVisible', false)
        }
    }
}

注意：

        子组件中修改数据的时候，必须为固定格式this.$emit('update:数据名',value)

二、利用v-model实现父子传参

v-model：

        v-model实际上是一个vue的语法糖，它默认会绑定一个input事件，和v-bind:value

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的 

父组件

<div>
  <child v-model="pValue"></child>
</div>
<script>
data () {
  return {
   pValue: 0
  }
}
</script>

子组件 

export default {
 name: 'child',
 props: {
  value: {
   type: Number,
   default: 0
  }
 },
 methods: {
  changePvalue () {
   this.$emit('input', ++sum)
  }
 }
}
</script>

三、ref/refs实现父子组件通信

ref：

        ref可以指向页面dom元素，当使用在自定义组件上时，ref指向子组件实例，我们可以通过访问子组件实例来实现父子组件通信。

父组件

<template>
  <div>
    <child ref="child"></child>
    <button @click="getCMsg">getCMsg</button>
  </div>
</template>
import child from './child.vue'
  export default {
    components: { child },
    methods: {
      getCMsg() {
        this.$refs.child.getMSG()
      }
    }
  }
</script>

子组件

<script>
export default {
  data () {
    return {
      MSG: '你好，我是子组件',
    }
  },
  methods: {
    sayHello () {
      console.log(this.MSG)
    }
  }
}
</script>

 四、$parent和$children实现父子组件通信

        此方法不建议使用（因为在获取$children时，获取到的是数组，当我们代码在不断优化，不断重构时，数组的长度是发生改变的，同样，$parent也类似），在此只做简述。

原理：

        通过$parent/$children可以获取到父组件/子组件的实例，从而可以调用父/子组件中的方法/数据，随后根据业务进行处理。