精华内容
下载资源
问答
  • 2020-05-18 10:04:17

    一、子组件需要做的

    子组件要显式地用 props 选项声明它期待获得的数据

    props:[data]

    然后在组件内使用data

    二、父组件需要做的

    这个时候需要区分静态传值和静态传值

    静态

    在父组件使用子组件标签时   

    <tem data="haha"></tem>

    这个时候静态传值就完成了

    动态

    在父组件使用子组件标签时

    <tem v-bind: data="myData"></tem>

    data(){ return{ myData:"haha"  }}

    注:在传递数字的时候尽量使用静态传值

    三、props验证

    有时候我们需要对传递过来的值进行验证,以确定传递的值符合我们的要求

    要指定验证规格,需要用对象的形式,而不能用字符串数组  这时的props需要写成对象

    props:{data:Array}

    注: 当 prop 验证失败,Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用;

    四、单向数据流

    props传值是单向的:父组件的数据可以传给子组件,而子组件的数据不能传给父组件,这是为了防止子组件无意修改了父组件的状态,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了,Vue 会在控制台给出警告

    五、修改props数据

    通常改变props的数据有两个原因

     1、prop 作为初始值传入后,子组件想把它当作局部数据来用

     2、prop 作为初始值传入,由子组件处理成其它数据输出

    注:JS中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态

    因此  接下来:

    1、定义一个局部变量,并用 prop 的值初始化它

    props: ['initialCounter'],    data: function () {      return { counter: this.initialCounter }    }

    但是,定义的局部变量counter只能接受initialCounter的初始值,当父组件要传递的值发生变化时,counter无法接收到最新值

    2、定义一个计算属性,处理 prop 的值并返回

    props: ['size'],    computed: {    normalizedSize: function () {    return this.size.trim().toLowerCase()    }    }

    但是,由于是计算属性,则只能显示值,而不能设置值

    3、更好的方式,使用变量储存prop的初始值,并使用watch来观察prop的值的变化。发生变化时,更新变量的值

    props:['childMsg'],    data(){      return{       temp:this.childMsg       }     },     watch:{     childMsg(){    this.temp =this.childMsg     }     }

    更多相关内容
  • 今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 关于VUE props传值问题

    2022-05-20 21:11:10
    使用props传值时无法在mounted处理怎么解决 最近遇到这个问题,父子组件使用props传值时无法在mounted中处理, 究其原因是因为父组件中要传递给子组件的 props 属性 是通过 ajax请求获取的, 请求的这个过程是需要...

    使用props传值时无法在mounted处理怎么解决

    最近遇到这个问题,父子组件使用props传值时无法在mounted中处理,
    究其原因是因为父组件中要传递给子组件的 props 属性 是通过 ajax请求获取的, 请求的这个过程是需要时间的异步获取等待返回,然而子组件的渲染要快于ajax请求过程,所以此时在created 、 mounted 只执行一次的生命钩子函数中,执行完成后,此时 props 还没有传递(子组件),所以只能获取默认的props值,当props获取ajax完成后传递进来,此时生命周期函数已经执行完成了。

    解决措施就是使用watch监听数据的变化,不在mounted中处理props传来的数据。

    //子组件处理方式
    export default{
      data(){
        return{
          deviceNumber: -1,
        }
      },
      mounted() {
        // if(Array.isArray(this.Data.deviceManage) && this.Data.deviceManage.length>0){//判断是否为数组
        //   this.deviceNumber = this.Data.deviceManage.length;//赋值
        // }
      },
      watch:{
        Data:function (val){
          this.deviceNumber = val.deviceManage.length
        }
      },
      props:['Data'],
      }
    

    也可以在父组件强制赋值一下, 不是很推荐这种做法

     // parent
     <examAchTable ref="achTable" :dataList="examAchList"></examAchTable>
     
     // 若这里不强制赋值一下,在examAchList变化后直接调用子组件的transData方法时,子组件dataList仍是变化前的值
     this.$refs.achTable.dataList = this.examAchList
     this.$refs.achTable.transData(res.data.totalRecord)
     
     // child
     transData(total) {
          if (this.dataList) 
        // ...
    }
    
    展开全文
  • Vue props传值两种写法

    2022-04-14 10:32:58
    required: true } } } script> 简单传值 不对传值的数据类型进行限制 限定传值 对数据类型和是否一定要传值(不传值使用默认值)进行限制 注意: 针对于props配置传进子组件的变量一般不能进行修改,会报错 可以通过...

    示例:
    父组件:

    <template>
      <div>
        <school id="school" ref="sch" name1="SJ" address="China" />
        <school id="school" ref="sch" name1="SJ1" address="China1" />
      </div>
    </template>
    

    子组件:

    <template>
      <div class="school">
        <h1>{{ msg }}</h1>
        <h2>学校名称:{{ name1 }}</h2>
        <h2>年龄:{{ age }}</h2>
        <h2>学校地址:{{ address }}</h2>
      </div>
    </template>
    
    <script>
      export default {
        name: 'School',
        data() {
          return {
            msg: 'props study'
          }
        },
        // 简单传值
        // props: ['name1', 'address']
        // 限定传值
        props: {
          name1: {
            type: String, // 限制数据类型
            required: true // 限制必须传值
          },
          age: {
            type: Number,
            default: 99 // 可以不传值,默认为99
          },
          address: {
            type: String,
            required: true
          }
        }
      }
    </script>
    

    简单传值
    不对传值的数据类型进行限制
    限定传值
    对数据类型和是否一定要传值(不传值使用默认值)进行限制
    注意:
    针对于props配置传进子组件的变量一般不能进行修改,会报错
    可以通过在子组件的data中声明一个新的变量进行接收之后再修改
    父子组件传值的时候变量不要设置为一些关键词(例如ref或者key)会报错

    展开全文
  • 1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <input v-model=message> <child message=hello></child> [removed] import child from './components/child.vue' export ...
  • vue props传值

    2020-12-10 16:34:08
    父组件通过props 把值传递给子组件 在子组件内部不能直接修改父组件传递过来的值------------- 子组件可以通过 this.$emit(“方法”); 让父组件来修改值 子组件内 父组件内 methods中

    父组件通过props 把值传递给子组件 在子组件内部不能直接修改父组件传递过来的值------------- 子组件可以通过 this.$emit(“方法”); 让父组件来修改值
    子组件内
    在这里插入图片描述
    父组件内
    在这里插入图片描述
    methods中
    在这里插入图片描述

    展开全文
  • props 传值在子组件定义props 关于mounted created获取问题 export default{ props:["name"], data(){ return{ data:this.name } }, created(){ console.log(data); // 小明 console.log(this.name) // 小明 }, ...
  • 子组件(goods.vue):直接使用props接收的值显示在页面上 <text>{{`另需配送费${busiIntroData.physical}元`}}</text> props:{ busiIntroData:Object } 显示: 解决: 对于props声明为驼峰写法,...
  • vueprops传值常见问题

    2020-12-30 07:55:25
    错误是说的避免直接修改父组件传入的值,因为会改变父组件的值解决方案:可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,props:['listShop'],data(){return{...
  • vue props 传值 触发事件方法

    千次阅读 2018-10-25 11:43:02
    先父页传值 到子页用watch 监听show的值改变,触发方法 &lt;dialog :show='showData' v-on:listen='handData'&gt;&lt;/dialog&gt; data(){ return:{ showData:true } } methods:{ ...
  • props传值验证 props: { // 检测类型 height: Number, // 检测类型 + 其他验证 age: { type: Number, //验证类型 default: 0, //默认值 对象或数组的默认值必须从一个工厂函数返回 // 对象或数组默认值...
  • vue props传值失败 输出undefined的问题

    万次阅读 2018-06-07 16:18:00
    如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:&lt;div id="app"&gt; &lt;test :type="type"&gt;&lt;/test&gt; &lt;/div&gt;...
  • vue props传值,子组件接受到undefined

    千次阅读 2019-03-28 18:05:37
    不应该在一个子组件内部改变 prop,Vue 会在浏览器的控制台中发出警告。 props传参,子组件接受到undefined的可能情况之一是因为大小写问题,因为 HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符...
  • vue props传值常见问题

    2020-12-30 07:55:24
    错误是说的避免直接修改父组件传入的值,因为会改变父组件的值解决方案:可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,props:['listShop'],data(){return{...
  • 1.最近完成一个table列表,控制cloumn的显示隐藏的功能时,发现一个问题,记录一下 首先问题是: 通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子 // 列信息 columns: [ ...
  • vue props传值方法

    2021-02-05 00:19:10
    v-for="(item, index) in type"@click="handle($event)"@touchMove='touchMove'>{{item.main}} --{{index}} //key/valueimport Tabs from './tabs';export default {name: 'HelloWorld',components:{Tabs},data ....
  • vue props组件传值

    2021-09-28 15:13:57
    prop 传值时候如果使用的是短横线,接受的时候要使用驼峰 <template> <div id="example"> <!--自定义组件MyComponent--> <my-component title="你好" :full-name="name"></my-...
  • Vue项目中props传值时子组件检测不到的问题 我们在Vue项目开发的过程中,经常会需要在父子组件传值,我们都知道,父组件向子组件传值的时候是通过props 来进行的,但是在父组件的数据动态改变的时候,子组件却接收...
  • 本篇文章主要介绍了浅谈vueprops,data,computed变化对组件更新的影响,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue组件props传值,对象获取不到的问题 问题描述: 父组件利用props向子组件传值,浏览器console有这个值,但是获取不到对象里的属性,console对象的属性值,打印出来值为undefined。 父组件定义了testobj这个对象。...
  • 问题: Props with type Object/Array must use a factory function to return the ...vue父作用域将数据传到子组件通过props进行传参,如果需要传多个参数可以数组形式赋值给props,通过这样子组件就可以获取父组
  • 问题:Vue组件中props传值,有些值可以直接修改有些不可以 分析:JavaScript 中对象和数组的变量间赋值是通过引用赋值的 ...
  • VUEprops传值(对象)更新不显示

    千次阅读 2020-07-14 17:29:33
    }, } }, 【问题解释及尝试】 props参数是传递了,但是页面并没有更新,使用watch 和 computed页面都不渲染,至于为啥我也搞不太明白,后续研究明白了,再来更新。 【解决办法】 由问题尝试得,组件数据没问题只是不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,498
精华内容 8,599
关键字:

vueprops传值

友情链接: pcihp_slot.rar