精华内容
下载资源
问答
  • vue props遇到的坑
    2021-12-02 16:16:30

    情景:父组件请求数据后通过props把数据传给子组件,子组件一上来就用这个props的数据,会拿不到数据

    原因:子组件比父组件先渲染,子组件一上来就用prop传过来的数据,这个时间父组件还没有请求回来数据

    更多相关内容
  • 主要介绍了vue props 一次传多个值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇解决vue props 拿不到值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue props中Object和Array设置默认值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题: Props with type Object/Array must use a factory function to return the ...vue父作用域将数据传到子组件通过props进行传参,如果需要传多个参数可以数组形式赋值给props,通过这样子组件就可以获取父组
  • Invalid default value for prop “demo”: Props with type Object/Array must use a factory function to return the default value. 2、正确的写法应该是: demo: { type: Array, default: function () { ...
  • 使用vue的render函数实现组件之间动态嵌套功能。文章链接:https://blog.csdn.net/qq_35134375/article/details/109159574
  • Vue props用法详解 组件接受的选项之一 propsVue 中非常重要的一个选项。父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。 ...
  • Vue props传值两种写法

    2022-04-14 10:32:58
    <h1>{{ msg }}h1> 学校名称:{{ name1 }}h2> 年龄:{{ age }}h2> 学校地址:{{ address }}h2> div> template> <script> export default { name: 'School', data() { return { msg: 'props study' } }, // 简单传值 // ...

    示例:
    父组件:

    <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)会报错

    展开全文
  • 主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue - props 声明数组和对象操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue props用法小结

    千次阅读 2018-11-14 16:07:19
    Vue props用法详解 组件接受的选项之一 propsVue 中非常重要的一个选项。父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。 ...

    Vue props用法详解
    组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为:

    props down, events up

    父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。

    父子级组件
    比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性。

    这里我们先定义父子两个组件和一个 Vue 对象:

    var childNode = {
     template: `
        <div>childNode</div>
        `
    };
    var parentNode = {
     template: `
        <div>
         <child></child>
         <child></child>
        </div>
        `,
     components: {
      child: childNode
     }//前端全栈学习交流圈:866109386
    };//帮助1-3Ian前端人员,突破技术瓶颈,提升思维能力
    new Vue({
     el: "#example",
     components: {
      parent: parentNode
     }
    });
    
    <div id="example">
     <parent></parent>
    </div>
    

    这里的 childNode 定义的 template 是一个 div,并且内容是"childNode"字符串。
    而在 parentNode 的 template 中定义了 div 的 class 名叫 parent 并且包含了两个 child 组件。

    静态 props
    组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板中直接饮用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项。

    父组件向子组件传递数据分为两种方式:动态和静态,这里先介绍静态方式。

    子组件要显示的用 props 声明它期望获得的数据

    修改上例中的代码,给 childNode 添加一个 props 选项和需要的forChildMsg数据;
    然后在父组件中的占位符添加特性的方式来传递数据。

    var childNode = {
     template: `
        <div>
         {{forChildMsg}}
        </div>
        `,
     props: ["for-child-msg"]
    };
    var parentNode = {
     template: `
        <div>
         <p>parentNode</p>
         <child for-child-msg="aaa"></child>
         <child for-child-msg="bbb"></child>
        </div>
        `,
     components: {
      child: childNode
     }
    };
    

    命名规范
    对于 props 声明的属性,在父组件的 template 模板中,属性名需要使用中划线写法;

    子组件 props 属性声明时,使用小驼峰或者中划线写法都可以;而子组件的模板使用从父组件传来的变量时,需要使用对应的小驼峰写法。别担心,Vue 能够正确识别出小驼峰和下划线命名法混用的变量,如这里的forChildMsgfor-child-msg是同一值。

    动态 props

    在模板中,要动态地绑定父组件的数据到子组件模板的 props,和绑定 Html 标签特性一样,使用v-bind绑定;

    基于上述静态 props 的代码,这次只需要改动父组件:

    var parentNode = {
     template: `
        <div>
         <p>parentNode</p>
         <child :for-child-msg="childMsg1"></child>
         <child :for-child-msg="childMsg2"></child>
        </div>
        `,
     components: {
      child: childNode
     },
     data: function() {
      return {
       childMsg1: "Dynamic props msg for child-1",
       childMsg2: "Dynamic props msg for child-2"
      };
     }
    };
    

    在父组件的 data 的 return 数据中的 childMsg1 和 childMsg2 会被传入子组件中,

    props 验证
    验证传入的 props 参数的数据规格,如果不符合数据规格,Vue 会发出警告。

    能判断的所有种类(也就是 type 值)有:String, Number, Boolean, Function, Object, Array, Symbol

    Vue.component("example", {
     props: {
      // 基础类型检测, null意味着任何类型都行
      propA: Number,
      // 多种类型
      propB: [String, Number],
      // 必传且是String
      propC: {
       type: String,
       required: true
      },
      // 数字有默认值
      propD: {
       type: Number,
       default: 101
      },
      // 数组、默认值是一个工厂函数返回对象
      propE: {
       type: Object,
       default: function() {
        console.log("propE default invoked.");
        return { message: "I am from propE." };
       }
      },
      // 自定义验证函数
      propF: {
       isValid: function(value) {
        return value > 100;
       }
      }
     }
    });
    let childNode = {
     template: "<div>{{forChildMsg}}</div>",
     props: {
      "for-child-msg": Number
     }
    };
    let parentNode = {
     template: `
         <div class="parent">
          <child :for-child-msg="msg"></child>
         </div>
        `,
     components: {
      child: childNode
     },
     data() {
      return {
       // 当这里是字符串 "123456"时会报错
       msg: 123456
      };
     }
    };
    

    还可以在 props 定义的数据中加入自定义验证函数,当函数返回 false 时,输出警告。

    比如我们把上述例子中的 childNode 的for-child-msg修改成一个对象,并包含一个名叫validator的函数,该命名是规定叫validator的,自定义函数名不会生效。

    let childNode = {
     template: "<div>{{forChildMsg}}</div>",
     props: {
      "for-child-msg": {
       validator: function(value) {
        return value > 100;
       }
      }
     }
    };
    

    在这里我们给for-child-msg变量设置了validator函数,并且要求传入的值必须大于 100,否则报出警告。

    单向数据流
    props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件五一修改父组件的状态。

    所以不应该在子组件中修改 props 中的值,Vue 会报出警告。

    let childNode = {
     template: `
         <div class="child">
          <div>
           <span>子组件数据</span>
           <input v-model="forChildMsg"/>
          </div>
          <p>{{forChildMsg}}</p>
         </div>`,
     props: {
      "for-child-msg": String
     }
    };
    let parentNode = {
     template: `
         <div class="parent">
          <div>
           <span>父组件数据</span>
           <input v-model="msg"/>
          </div>
          <p>{{msg}}</p>
          <child :for-child-msg="msg"></child>
         </div>
        `,
     components: {
      child: childNode
     },
     data() {
      return {
       msg: "default string."
      };
     }
    };
    

    这里我们给父组件和子组件都有一个输入框,并且显示出父组件数据和子组件的数据。当我们在父组件的输入框输入新数据时,同步的子组件数据也被修改了;这就是 props 的向子组件传递数据。而当我们修改子组件的输入框时,浏览器的控制台则报出错误警告

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “forChildMsg”

    修改 props 数据
    通常有两种原因:

    • prop 作为初始值传入后,子组件想把它当做局部数据来用
    • prop 作为初始值传入后,由子组件处理成其他数据输出
      应对办法是

    定义一个局部变量,并用 prop 的值初始化它
    但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值,当父组件要传递的值变化发生时,ownChildMsg 无法收到更新。

    et childNode = {
     template: `
         <div class="child">
          <div>
           <span>子组件数据</span>
           <input v-model="forChildMsg"/>
          </div>
          <p>{{forChildMsg}}</p>
          <p>ownChildMsg : {{ownChildMsg}}</p>
         </div>`,
     props: {
      "for-child-msg": String
     },
     data() {
      return { ownChildMsg: this.forChildMsg };
     }
    };
    

    这里我们加了一个

    用于查看 ownChildMsg 数据是否变化,结果发现只有默认值传递给了 ownChildMsg,父组件改变只会变化到 forChildMsg,不会修改 ownChildMsg。

    定义一个计算属性,处理 prop 的值并返回
    由于是计算属性,所以只能显示值,不能设置值。我们这里设置的是一旦从父组件修改了 forChildMsg 数据,我们就把 forChildMsg 加上一个字符串"—ownChildMsg",然后显示在屏幕上。这时是可以每当父组件修改了新数据,都会更新 ownChildMsg 数据的。

    let childNode = {
     template: `
         <div class="child">
          <div>
           <span>子组件数据</span>
           <input v-model="forChildMsg"/>
          </div>
          <p>{{forChildMsg}}</p>
          <p>ownChildMsg : {{ownChildMsg}}</p>
         </div>`,
     props: {
      "for-child-msg": String
     },
     computed: {
      ownChildMsg() {
       return this.forChildMsg + "---ownChildMsg";
      }
     }
    };
    

    更加妥帖的方式是使用变量存储 prop 的初始值,并用 watch 来观察 prop 值得变化。发生变化时,更新变量的值。

    let childNode = {
     template: `
         <div class="child">
          <div>
           <span>子组件数据</span>
           <input v-model="forChildMsg"/>
          </div>
          <p>{{forChildMsg}}</p>
          <p>ownChildMsg : {{ownChildMsg}}</p>
         </div>`,
     props: {
      "for-child-msg": String
     },
     data() {
      return {
       ownChildMsg: this.forChildMsg
      };//前端全栈学习交流圈:866109386
     },//帮助1-3年前端人员,突破技术瓶颈,提升思维能力
     watch: {
      forChildMsg() {
       this.ownChildMsg = this.forChildMsg;
      }
     }
    };
    
    展开全文
  • 今天小编就为大家分享一篇vue props对象validator自定义函数实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 3分钟了解 vue props type类型

    千次阅读 2021-10-08 16:57:45
    用了很久的vue,有时候总觉得props type类型,总是有点模棱两可,今天来好好的盘盘他 props介绍: 都知道props是用来父给子传值的(单向的),HTML 中的 attribute 名是大小写不敏感的,这意味着当你使用 DOM 中的...

    用了很久的vue,有时候总觉得props type类型,总是有点模棱两可,今天来好好的盘盘他

     props介绍:

    都知道props是用来父给子传值的(单向的),HTML 中的 attribute 名是大小写不敏感的,这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

     props类型:

    props type使用的目的,有点像typescript那种类型检查, type的类型有如下几种,

    • String
    • Number
    • Boolean
    • Array
    • Object
    • Date
    • Function
    • Symbol

    props的写法:

    第一种简单的写法(无默认值):

    props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise 
    }

    第二种有默认值的写法:

    注意:type 是 对象类型的,default 要使用工厂函数获取,例子如下

    props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        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 ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }
      }

    展开全文
  • vue props type设置多个类型

    千次阅读 2021-08-30 14:39:26
    props: { value: { // vue props type设置多个类型 type: Number | null, required: true }, articleId: { type: [Number, String, Object], required: true } },
  • 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选项的多种写法,详细的介绍了props的使用的写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要帮助大家简单的理解vueProps属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue.component('demo', { props: { test: {type: Person,} }, template: '<div>{{test.name}}</div>', }) 3、在父组件中的计算属性必须使用"new Person();"创建这个类,使用其它
  • Vue props定义多种类型检查

    千次阅读 2020-12-21 16:15:23
    <template> <div> </div> </template>... props: { map: Object, coordinate: Array, content: Object, showMore: Boolean, title:[String,Number] }, } </script>
  • vue props双向绑定

    2020-09-07 21:04:42
    如果在子组件里尝试修改props里的值就会抛出以下错误: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed
  • vue props 传值

    千次阅读 2020-05-18 10:04:17
    props 选项声明它期待获得的数据props:[data]然后在组件内使用data二、父组件需要做的这个时候需要区分静态传值和静态传值静态在父组件使用子组件标签时   <tem data="haha"></tem>这个...
  • vue props传值常见问题

    2020-12-30 07:55:24
    错误是说的避免直接修改父组件传入的值,因为会改变父组件的值解决方案:可以在data中重新定义一个变量,改变指向,但是也只是针对简单数据类型,因为复杂数据类型栈存贮的是指针,props:['listShop'],data(){return{...
  • vueprops 中定义多属性对象,语法如下 例如定义 formValidate 对象,且 formValidate 中含有属性 city 和 name,默认 city 和 name 都是空 formValidate: { type: Object, default: ()=>{ return { ...
  • 主要介绍了Vue中的Props(不可变状态),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <input v-model=message> <child message=hello></child> [removed] import child from './components/child.vue' export ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,294
精华内容 47,317
关键字:

Vue props

友情链接: FreshInvoice_jooz8u.rar