vue2组件通信方式

vue2通信方式

1.父组件传值给子组件，利用 props

父组件 app.vue

<template>
  <div id="app">
    <child :name="name"/>
  </div>
</template>
​
<script>
import child from './child.vue'
​
export default {
  name: 'App',
  data() {
    return {
      name: '我是父组件页面的name',
    }
  },
  components: {
    child,
  },
}
</script>

子组件 child.vue

<template>
  <div class="box">
     父组件的{{ name }}
  </div>
</template>
​
<script>
export default {
  name: 'child',
  props: {
    name: {
      type: String, // 限制类型
      default: '', // 设置默认值
      require: true, // 是否必传
    },
  },
}
</script>

2.子组件和父组件通信 $emit

父组件 app.vue

<template>
  <div id="app">
    <child @see="see" />
  </div>
</template>
​
<script>
import child from './child.vue'
​
export default {
  name: 'App',
  components: {
    child,
  },
  methods: {
    see(value) {
      console.log('hello', value)
    },
  },
}
</script>

子组件 child.vue

<template>
  <div class="box">
    <span @click="handleClick">你好</span>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('see', '父组件接收的参数')
    },
  },
}
</script>