vue组件传值

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质

子向父的介质是自定义事件

父向子的介质是props中的属性

1.父组件传值给子组件(props)

father.vue

<template>
  <div>
    <Child :msg='message'></Child>  // 给子组件动态绑定属性并赋值
  </div>
</template>

<script>
// 引入子组件
import Child from './Child.vue'
export default {
  name: 'father',
  data () {
    return {
      message: '传递给子组件child的值'
    }
  },
  // 注册子组件
  components: {
    Child
  }
}
</script>

child.vue

<template>
  <div>
    <p>接收父组件传的值：{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  // 子组件中创建props，然后创建一个名为msg的属性
  // 接收父组件传过来的值，也可以定义类型
  props: ['msg']，
  //---------String,Number,Array,Object,Boolean
  props: {
    msg: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default() {
         return []
      }
    }，
    ele: {
      type: Object,
      default() {
        return {}
    },
    num: {
      type: Number,
      default:10  
    }，
    hidden: {
      type: Boolean,
      default: false
    } 
 }
</script>

2.子组件传值给父组件

father.vue

<template>
  <div>
    子组件传过来的值: {{newValue}}
    // 监听自定义事件并添加一个响应该事件的处理方法
    <Child :msg='message'  @changeData='receive'></Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  name: 'father',
  data () {
    return {
      newValue: '',
      message: '传递给子组件child的值'
    }
  },
  components: {
    Child
  },
  methods: {
    receive (params) {
      this.newValue = params
    }
  }
}
</script>

child.vue

<template>
  <div>
    <input v-model="value">
    <button @click="send()">向父组件传值</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['msg'],
  data () {
    return {
      value: '来自子组件的消息内容'
    }
  },
  methods: {
  // 通过事件触发,给父组件传递参数   使用$emit来触发一个自定义事件，并传递一个参数
    send () {
      this.$emit('changeData', this.value)
    }
  }
}
</script>

3.兄弟组件传值

通过设置Bus中央事件总线的方式，实现兄弟组件之间的传值

单独创建一个VueEvent.js文件

Father.vue

<template>
  <div>
    <Child></Child>
    <Child1></Child1>
  </div>
</template>

<script>
import Child from './Child.vue'
import Child1 from './Child1.vue'
export default {
  name: 'Father',
  components: {
    Child,
    Child1
  }
}
</script>

Child.vue

<template>
  <div>
    <button @click='sendInfo'>给child1发送信息</button>
  </div>
</template>

<script>
// 引入VueEvent.js文件
import VueEvent from '../VueEvent.js'
export default {
  name: 'Child',
  data () {
    return {
      info: '来自兄弟组件child的信息'
    }
  },
  mounted () {
    // 接收兄弟组件Child1传过来的值
    VueEvent.$on('to-child', (arg) => {
      console.log('arg', arg) // 来自兄弟组件child1的信息
    })
  },
  methods: {
    sendInfo () {
      // 广播数据  传值给兄弟组件Child1
      VueEvent.$emit('to-child1', this.info) 
    }
  }
}
</script>

Child1.vue

<template>
  <div>
    <button @click="sendData">给child发送信息</button>
  </div>
</template>

<script>
// 引入VueEvent.js文件
import VueEvent from '../VueEvent.js'
export default {
  name: 'Child1',
  mounted () {
    // 接收兄弟组件Child传过来的值
    VueEvent.$on('to-child1', (data) => {
      console.log('data', data)  // 来自兄弟组件child的信息
    })
  },
  methods: {
    sendData () {
      // 广播数据  传值给兄弟组件Child
      VueEvent.$emit('to-child', '来自兄弟组件child1的信息')
    }
  }
}
</script>