Vue通信（子传父）

最新推荐文章于 2024-03-25 13:01:07 发布

尘寰ya

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量171

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44165941/article/details/108807810

版权

vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

子组件向父组件传递数据

简单理解：
子组件通过触发事件生成自定义函数，父组件通过调用自定义函数去实现相应的方法。

第一步

子组件模板有触发事件，本例中<button v-for=‘item in categories’ @click=‘btnClick(item)’>；

@click='btnClick(item)
调用 methods: {
btnClick(item){
//自定义函数item-click（用于发送）
this.$emit(‘item-click’,item)
}
}

第二步

在触发事件中自定义函数：
this.$emit(‘item-click’,item)中item-click即为自定义函数。

第三步

在父组件模板中调用自定义函数（item-click），触发父组件中的相应方法（cpnClick）。

methods: {
// cpnClick()用于接收
cpnClick(item){
console.log(‘cpnClick’,item);
}
}

渲染效果

图片: 渲染效果

控制台能够打印出子组件中相应数据，说明子组件向父组件传输数据成功。
// 子组件
const cpn = {
template: ‘#cpn’,
data() {
return {
categories: [
{ id: ‘aaa’, name: ‘热门推荐’ },
{ id: ‘bbb’, name: ‘手机数码’ },
{ id: ‘ccc’, name: ‘家用家电’ },
{ id: ‘ddd’, name: ‘电脑办公’ },
]
}
},
methods: {
btnClick(item){
// 重点↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//自定义函数item-click（用于发送）
this.$emit(‘item-click’,item)
}
}
}

相应代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 父组件模板 -->
  <div id="app">
    <cpn @item-click='cpnClick'></cpn>
  </div>
  <!-- 子组件模板 -->
  <template id='cpn'>
    <div>
      <button v-for='item in categories' @click='btnClick(item)'>
        {{item.name}}
      </button>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    // 子组件
    const cpn = {
      template: '#cpn',
      data() {
        return {
          categories: [
            { id: 'aaa', name: '热门推荐' },
            { id: 'bbb', name: '手机数码' },
            { id: 'ccc', name: '家用家电' },
            { id: 'ddd', name: '电脑办公' },
          ]
        }
      },
      methods: {
        btnClick(item){
          // 重点↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
          //自定义函数item-click（用于发送）
          this.$emit('item-click',item)
        }
      }
    }

    // 父组件
    let app = new Vue({
      el: '#app',
      data: {
        message:'你好呀'
      },
      components: {
        cpn
      },
      methods: {
        // cpnClick()用于接收
        cpnClick(item){
          console.log('cpnClick',item);
        }
      }
    })
  </script>
</body>

</html>