vue之父子组件传值

Author：逸云先生
发布时间：December 31, 2020
2091 views
No comments
892 words
Categories： Web开发 Vue

### **父组件向子组件传值**

#### 这是父组件

```
<template>
    <div class="test">
      <son :value='title'></son>
    </div>
</template>

import son from './son.vue';

export default {
  components: {
    son,
  },
  data() {
    return {
      title: '我是父组件的传过来的值',
    };
  },
};
</script>
```

#### 这是子组件

```
<template>
  <div class="son">
{{value}} +1 + {{value}}
  </div>
</template>

};
</script>
```

### 子组件向父组件传值

#### 这是子组件

```
<template>
    <div>
        <button @click="sendTOParent">向父组件传值</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      data: '我是子组件的值',
    };
  },
  methods: {
    sendTOParent() {
      this.$emit('listenToChildEvent', this.data);
    },
  },

};
</script>
```

#### 这是父组件

```
<template>
    <div>
        <son v-on:listenToChildEvent = 'showMsgfromChild'></son>
    </div>
</template>
<script>
import son from './son.vue';

export default {
  components: { son },
  data() {
    return {
    };
  },
  methods: {
    showMsgfromChild(data) {
      console.log(data);
    },
  },

};
</script>
```

Last modification：September 2, 2023