vue公共组件封装及传值

本文介绍了Vue组件的三要素:props参数、slot定制插槽和event自定义事件。详细讲解了如何封装公共组件,包括创建组件、注册公共组件。同时,深入探讨了父子组件间的数据传递,如父组件向子组件传递数据、子组件向父组件传递数据、子组件改变父组件数据的正确方式。此外,还详述了插槽的使用,包括默认插槽、具名插槽、作用域插槽及其在实际开发中的应用。
摘要由CSDN通过智能技术生成

Vue组件的三要素

1. props参数
2. slot定制插槽
3. event自定义事件


基本组件开发

创建一个.vue文件,其中包含template、script以及style:

<template>
  <div class="headComponent">
    {
  { msg }}
  </div>
</template>

<script>
export default {
    props:['data','type'],
    inheritAttrs: false,
    data(){
        return{
            msg:'',
        }
    }
}
</script>
<style scoped>

</style>


至此就完成一个基本的组件了,要想使用这个组件,就需要在其他js文件中引入并注册:

import Head from '../components/headComponent.vue'

 

 

如何封装一个公共组件?

  1. 首先在src目录下新建一个Components文件夹。
  2. 新建要封装的组件名为子级文件夹
  3. 子级文件夹下新建index.vue文件 存放要封装的公共组件部分
  4. 最后在Components文件夹下 新建index.js文件
  5. 并且注册公共组件到全局
import pageTools from './pageTools/index'
 
export default {
  install(Vue) {
    Vue.component('pageTools', pageTools)
   
  }
}


这样就可以在其它组件中不用导入组件就可使用公共组件

< pageTools></ pageTools>



 


组件之间的数据传递

 *父子组件通信

  子组件:

d0a5deb8b1cc155920e0a3a197ef25f8.png

     

    父组件:

09102a4abc7e6fc38a1568c1e1977200.png

 

 

 

1. 父组件向子组件中传递数据

父组件通过属性的形式向子组件传递数据,子组件使用props接收数据,但是通用组件的应用场景比较复杂,对 props 传递的参数应该添加一些验证规则,即:

props: {
    propA: Number,  // 基础类型检测 (`null` 意思是任何类型都可以)
    propB: [String, Number],   // 多种类型
    propC: {  // 必传且是字符串
      type: String,
      required: true
    },
    propD: {   // 数字,有默认值
      type: Number,
      default: 100
    },
    propE: {   // 数组/对象的默认值应当由一个工厂函数返回
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    propF: {   // 自定义验证函数
      validator: function (value) {
        return value > 10
      }
    }
  }

 


由于存在一个单项数据流的问题,父组件传递给子组件的数据不要直接修改,因为会将父组件中的数据也修改,当这个数据也传入其他组件的时候就会出问题了。vue2.5已经针对 props 做出优化,这个问题已经不存在了 如果一定需要有这样的操作,可以这么写:

let copyData = JSON.parse(JSON.stringify(this.data))

为什么不直接写 let myData =

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,将表格组件封装后需要传值时,可以通过props来进行传递。props是父组件向子组件传递数据的方式,我们可以定义一个props对象来接收父组件传递过来的值,然后在子组件中使用这个值。 例如,我们在父组件中定义了一个表格组件,并且需要向表格组件传递一个数据列表,可以这样写: ``` <template> <div> <my-table :dataList="list"></my-table> </div> </template> <script> import MyTable from './MyTable.vue' export default { components: { 'my-table': MyTable }, data () { return { list: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 25 }, { id: 3, name: '王五', age: 30 } ] } } } </script> ``` 在子组件中,我们需要定义props对象来接收父组件传递过来的值,并且在组件中使用这个值。例如,我们在子组件中定义了一个表格组件,可以这样写: ``` <template> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr v-for="item in dataList" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </template> <script> export default { props: { dataList: { type: Array, required: true } } } </script> ``` 在子组件的props对象中,我们定义了一个dataList属性,它的类型为Array,表示需要传递一个数组类型的值。required属性表示这个属性是必须要传递的,如果没有传递,会抛出一个警告。 在子组件的模板中,我们通过v-for循环遍历dataList数组,渲染出表格中的每一行数据。这样,就可以将父组件传递过来的值用于子组件中的渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值