vue组件中props与data的结合使用方式

目录
  • 组件中props与data的结合使用
  • 子组件中data从props中动态更新数据

组件中props与data的结合使用

如前所述(vue组件属性(props)及私有数据data),vue组件中,props是组件公有属性,对外;data是组件的私有数据,对内。正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值。当然,改也可以改,但运行时刻会有告警。

正如我们写一个函数,对于传入的参数,我们一般是只读对待的,极少会去修改它的值一样。当然,这只是一种编码约定,你硬是要改,也无话可说,改了就改了。

同时,props是在开发时,预先设置好,传给组件的。在运行过程中,这些设置是一锤子买卖,以后就不起作用了。假如我们想调用该组件的一个方法,而该方法又依赖于props,问题就出来了:props是旧的。

这个时候,组件开发过程中,应该将props与data相结合。在组件内部,应该依赖于data,而data的初始值来自于props:

组件

export default {
  props: {
    id: { default: 0 }
  },
  data () {
    return {
      myId: this.id //用props的id初始化
    }
  },
  methods: {
    pop (id) { // 供外部调用
      this.myId = id
      alert(this.id)
      alert(this.myId)
    }
  }
}

调用组件:

<template>
  <div>
      <!-- 将变量id的值赋给组件的id属性,一锤子买卖 -->
    <Pop ref="popWin" :id="id" />
  </div>
</template>
<script>
import Pop from './_pop.vue'
export default {
  components: {
    Pop
  },
  data () {
    return {
      id: 0
    }
  },
  methods: {
    showDetail (id) {//页面的id也是由外部传进来的,事先不可能知道
      this.id = id //保存了id,但影响不了组件Pop
      this.$refs.popWin.pop(id) // 调用Pop组件的方法,并传递id
    }
  }
}
</script>

2021.07.22补充:

还有另一种机制,就是子组件监控props里的属性,当该属性变化时,就触发,处理相应的逻辑。

流程是这样:父组件或页面,将通过变量传值给子组件的props,子组件监控props。如果父组件在运行过程中,想动态更改这个属性,那就更改自己的变量。由于有监控(watch)机制存在,子组件被触发。

父组件或页面

<template>
   <div><Report ref="report1" :id="myId"/></div>
</template>
<script>
import Report from './_report.vue'
export default {
  components: {
    Report
  },
  data () {
    return {
      myId: 0,
    }
  },
  methods: {
    init (id) {
      this.myId = id //改变id值
    }
  }
}
</script>

组件_report.vue:

<template>
    <div>我是子组件,名曰谢康乐,一箭射双鹤</div>
</template>
<script>
export default{
  watch: {
    id (val) {
      alert('id变了,我是不是应该做点什么?')
    }
  }
}
</script>

2021.07.23补充:

监视比父组件调用子组件方法控制更为合理,耦合程度更低。你值得拥有。

子组件中data从props中动态更新数据

考虑这样一种情况,Vue 的父组件根据网络请求获取到数据后,动态更新到子组件的 props 上,

// 父组件
<template>
  <div class="parent">
    <chart :info='info'/>
  </div>
</template>
// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处 info 来自 props -->
      <li v-for="i in info" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {},
}
</script>

走到这一步,都很顺利,子组件能响应父组件的数据,进行动态更新。

但是,

实际项目中,往往要对子组件上接收到的数据进行操作处理,然后才能通过 data 渲染到页面上,这时就会发现,父组件上的数据变化,子组件不再能响应并及时更新了。

在子组件上把数据直接渲染到模型上即可。

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处 list 来自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    this.list = this.info.map(i => '0_'+i)
  },
}
</script>

原因很简单,从 props 的 info 传递给 data 的 list ,只有一次操作,就是在 mounted 中,往后即使 props 的 info 发生了变化,data 也接收不到。

问题在于数据在传递过程中不能及时关联,针对这一点,可以用 watch 来进行跟踪,如下即可

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处list 来自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    // this.list = this.info.map(i => '0_'+i)
  },
  watch: {
    info() {
      this.list = this.info.map(i => '0_'+i)
    }
  }
}
</script>

后记:

以上操作其实也是走了一些弯路,对于这种 通过对 props 数据操作再赋值给 子组件 data ,导致子组件 data 不能根据 父组件传值变化而及时更新数据的情况。直接用计算属性  computed  : list

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处comp 来自 computed -->
      <li v-for="i in comp" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  computed: {
    comp (){
      return this.info.map(i => '0_'+i)
    }
  },
}
</script>

如上即可

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue mergeProps用法详细讲解

    很多人不知道megreProps的用法,今天我们就来讲解下mergeProps的用法以及原理 用法 大家觉得下面哪种用法是正确的呢? 这样 style: mergeProps({ width: this.itemWidth }, xProps.style) 或者这样 style: mergeProps({ style: { width: this.itemWidth }, ...(xProps?.style ?? {}) }) 还是这样 style: mergeProps( { style: {

  • Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • Vue3源码分析组件挂载初始化props与slots

    目录 前情提要 初始化组件 (1).setupComponent (2).initProps (3).initSlots 额外内容 总结 前情提要 上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例).setupComponent(初始化组件).setupRenderEffect(更新副作用).并且上一节中我们已经详细讲解了组件实例上的所有属性,还包括emit.provide等的实现.本文我们将继续介绍组件挂载流程中的初始化组件. 本文主要内

  • vue组件中props与data的结合使用方式

    目录 组件中props与data的结合使用 子组件中data从props中动态更新数据 组件中props与data的结合使用 如前所述(vue组件属性(props)及私有数据data),vue组件中,props是组件公有属性,对外:data是组件的私有数据,对内.正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值.当然,改也可以改,但运行时刻会有告警. 正如我们写一个函数,对于传入的参数,我们一般是只读对待的,极少会去修改它的值一样.当然,这只是一种编

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • vue组件属性(props)及私有数据data解析

    目录 props 1.组件Comp1.vue 2.使用了Comp1的页面 3.运行结果 data 子组件中data和props的区别 vue组件中,props是公有属性,主要对外,相当于类里面的get.set方法操作的属性:data是私有数据,主要供组件内部访问. vue作为一种前端开发框架,组件是其中的主角吧.其实任何一种前端框架,除了vue,还有react,组件都应该是主角.为啥呢,因为组件最能体现面向对象思想,单一职责,良好的封装性,高内聚,低耦合,利于复用和维护,提升开发效率,符合人类思

  • Vue组件中的data必须是一个function的原因浅析

    组件可以有自己的data,并且data必须是一个function. 在下面这个例子中,data 返回了一个在外部定义的对象.并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="

  • Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • Vue组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • vue组件中的数据传递方法

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 一.父组件向子组件传递数据 子组件部分: <template> <div class="child"> {{ msg }} </

  • VUE组件中的 Drawer 抽屉实现代码

    因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div> <div :class="mainClass" :style="mai

  • Vue组件中的父子组件使用

    目录 Vue组件中的父子组件 父组件向子组件传值 子组件向父组件传值 Vue父子组件的生命周期 总结 Vue组件中的父子组件 父组件向子组件传值 父组件通过属性绑定(v-bind:)的形式, 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 子组件需要在内部定义 props 属性.例如 props : [ ‘parentmsg’ ] 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据 所有 props 中的数据都是通

  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic

随机推荐