vue——父子组件之间的传值

最新推荐文章于 2024-05-22 13:59:06 发布

_RichardYang

最新推荐文章于 2024-05-22 13:59:06 发布

阅读量128

点赞数

分类专栏： Vue 文章标签： vue html

本文链接：https://blog.csdn.net/qq_44916191/article/details/107585884

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

父组件向子组件传值使用props

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue-组件使用</title>
  <style>
    table {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
    }
    th, td {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: center;
    }
    th {
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
  </style>
  <!--  <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>

<!--父组件-->
<div id="app">
  <cpu :cbooks="books"></cpu>
</div>

<!--子组件-->
<template id="cpu">
  <div>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cbooks">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price}}</td>
          <td>{{item.count}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //接受来自父组件的信息
  const cpu = ({
    template: '#cpu',
    props: {
      cbooks: {
        type: Array,
        default: []
      }
    },
    data() {
      return {}
    }
  })

  //父组件
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {
          id: 1,
          name: '《算法导论》',
          date: '2016-04-10',
          price: 89.00,
          count: 1
        },
        {
          id: 2,
          name: "《vue实战编程》",
          date: "2016-04-10",
          price: 80.00,
          count: 1
        },
        {
          id: 3,
          name: "《ES6》",
          date: "2016-04-10",
          price: 78.00,
          count: 1
        },
        {
          id: 4,
          name: "《UNIX大全》",
          date: "2016-04-10",
          price: 69.00,
          count: 1
        },
      ]
    },
    components: {
      cpu
    }
  })
</script>
</body>
</html>

结果

传值的过程

第一步
第二步

子组件向父组件传值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue-组件使用</title>
  <!--  <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>

<!--父组件-->
<div id="app">
  <h1>{{message}}</h1>
  <h1>进行加减结果是：{{total}}</h1>
  <cpu @increment="changeTotal" @decrement="changeTotal"></cpu>
</div>

<!--子组件-->
<template id="cpu">
  <div>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  //传给父组件的信息
  const cpu = ({
    template: '#cpu',
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
        this.$emit('increment', this.count)
      },
      decrement() {
        this.count--
        this.$emit('decrement', this.count)
      }
    }
  })

  //父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '我们正在使用子组件向父组件传值',
      total: 0
    },
    methods: {
      changeTotal(count) {
        this.total = count
      }
    },
    components: {
      cpu
    }
  })
</script>
</body>
</html>

结果

在这里插入图片描述

流程

第一步
第二步

最后

通过两个小小的案例可以增加自己对vue父子组件有了一个深刻的认识，如何使用props和emit进行父子组件的传值和操作。

_RichardYang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue——父子组件之间的传值

父组件向子组件传值使用props<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue-组件使用</title> <style> table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0;
复制链接

扫一扫

专栏目录