vue3 子组件向父组件传递信息，子组件传递数据给父组件更新例子

最新推荐文章于 2024-10-08 11:49:30 发布

叠叠乐

最新推荐文章于 2024-10-08 11:49:30 发布

阅读量1.9k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_46506007/article/details/128242331

版权

警告！！！！！！！！！！！！！

这是来自Ai的回答，这是来自Ai的回答，它教会了我子组件向父组件传递信息


父组件：

```vue
<template>
  <div>
    <ChildComponent @sendValue="handleChildValue" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildValue (value) {
      // 这里可以接收到子组件传递过来的值
      console.log(value)
    }
  }
}
</script>
```

子组件：

```vue
<template>
  <div>
    <button @click="sendValueToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendValueToParent () {
      // 这里可以传递一个值给父组件
      this.$emit('sendValue', 'Hello World!')
    }
  }
}
</script>
```

上面的代码就是子组件向父组件传值的一个例子。

子组件通过 `$emit` 方法，给父组件传递一个参数，父组件通过 `@sendValue` 监听子组件传递过来的参数，然后在 `handleChildValue` 方法中接收到传递过来的值。

考虑到没有登录的用户

父组件：

```vue
<template>
<div>
<ChildComponent @sendValue="handleChildValue" />
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
components: {
ChildComponent
},
methods: {
handleChildValue (value) {
// 这里可以接收到子组件传递过来的值
console.log(value)
}
}
}
</script>
```

子组件：

```vue
<template>
<div>
<button @click="sendValueToParent">向父组件传值</button>
</div>
</template>

<script>
export default {
methods: {
sendValueToParent () {
// 这里可以传递一个值给父组件
this.$emit('sendValue', 'Hello World!')
}
}
}
</script>
```

上面的代码就是子组件向父组件传值的一个例子。

子组件通过 `$emit` 方法，给父组件传递一个参数，父组件通过 `@sendValue` 监听子组件传递过来的参数，然后在 `handleChildValue` 方法中接收到传递过来的值

。