当前位置:首页 > 编程教程 > vue技术文章 > vue props传值失败 输出undefined的解决方法

如何解决vue props传值失败后输出undefined的问题

  • 发布时间:
  • 作者:码农之家
  • 点击:116

这篇文章主要知识点是关于vue、props、传值失败、undefined、Vue props用法详解(小结) 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js前端开发:快速入门与专业应用
  • 类型:前端开发大小:3.6KB MB格式:PDF作者:陈陆扬
立即下载

vue props传值失败 输出undefined的解决方法

如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:

<code class="language-html"><div id="app"> 
<test :type="type"></test> 
</div> 
Vue.component("test", { 
  props: ['type'], 
  template: '<div @click="a">我是按钮{{type}}</div>', 
  methods: { 
   a() { 
    console.log(this.type); 
   } 
  } 
 }); 
var app = new Vue({ 
 el: '#app', 
 data: { 
 type: 'test' 
 } 
});</code> 

而当这个变量为驼峰命名法如:(selectName),就会传不过去:

<div id="app">
<test :selectName="selectName"></test>
</div>
Vue.component("test", {
  props: ['selectName'],
  template: '<div @click="a">我是按钮{{selectName}}</div>',
  methods: {
   a() {
    console.log(this.selectName);
   }
  }
 });
var app = new Vue({
 el: '#app',
 data: {
 selectName: 'test'
 }
});

解决方法是把selectName标签改为select-Name:

<div id="app">
<test :select-Name="selectName"></test>
</div>
Vue.component("test", {
  props: ['selectName'],
  template: '<div @click="a">我是按钮{{selectName}}</div>',
  methods: {
   a() {
    console.log(this.selectName);
   }
  }
 });
var app = new Vue({
 el: '#app',
 data: {
 selectName: 'test'
 }
});

总结:如果为驼峰命名法传递的话,html不区分大小写(所有的都会转换为小写),所以testName 在html表现为 :test-name ,需要注意的是vue中使用props传递时最好不要用横杆如select-name 的写法,因为使用的时候this.select-name中的横杠会认为它是减号,导致辨认不出来。在定义事件的时候最好命名都为小写,如

this.$emit("selectchange","data");

不要写成

this.$emit("selectChange","data");

html同样认不出来,比较好的方式是这种

this.$emit("select-change","data");

以上这篇vue props传值失败 输出undefined的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

Vue props用法详解(小结)

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
 }
};
new Vue({
 el: "#example",
 components: {
 parent: parentNode
 }
});
<div id="example">
 <parent></parent>
</div>

这里的 childNode 定义的 template 是一个 div,并且内容是"childNode"字符串。

而在 parentNode 的 template 中定义了 div 的 class 名叫 parent 并且包含了两个 child 组件。

如果大家想对VUE.JS有更加深入系统的学习,可以参阅 Vue.js实战 PDF高质量扫描版 这本经典读物

静态 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 数据

通常有两种原因:

  1. prop 作为初始值传入后,子组件想把它当做局部数据来用
  2. prop 作为初始值传入后,由子组件处理成其他数据输出

应对办法是

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

但是由于定义的 ownChildMsg 只能接受 forChildMsg 的初始值,当父组件要传递的值变化发生时,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
 },
 data() {
 return { ownChildMsg: this.forChildMsg };
 }
};

这里我们加了一个<p>用于查看 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
 };
 },
 watch: {
 forChildMsg() {
  this.ownChildMsg = this.forChildMsg;
 }
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • Vue中props的用法知识点
  • Vue2实现组件props双向绑定的具体方法
  • Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法
  • vue props传值失败 相关电子书
    学习笔记
    网友NO.181414

    Vue props 单向数据流的实现

    1、props通信 注意:DOM模板的驼峰命名props要转为短横分割命名。 !DOCTYPE htmlhtml lang="zh" head meta charset="UTF-8" / titleVue/title /head body div id="app" my-component message='来自父组件的数据' warning-text="提示信息"/my-component /div script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"/script script type="text/javascript" Vue.component('my-component', { template: 'div{{warningText}}:{{message}}/div', props: ['message', 'warningText'] }) new Vue({ el: "#app" }) /script /body/html 传递动态数据(v-bind): !DOCTYPE htmlhtml lang="zh" head meta charset="UTF-8" / titleVue/title /head body div id="app" input type="text" v-model="parentMessage" / my-component :message='parentMessage'/my-component /div script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"/script script type="text/javascript" Vue.component('my-component', { template: 'div{{message}}/div', props: ['message'] }) new Vue({ el: "#app", data: { parentMessage: '' }//前端全栈……

    网友NO.182005

    Vue中用props给data赋初始值遇到的问题解决

    前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props。为方便描述,现将问题抽象如下: 一、现象 代码: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title用props初始化data中变量/title script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"/script/headbodydiv id="app" user-info :user-data="user"/user-info/divscript //全局组件 let userInfo = Vue.component('userInfo' ,{ name: 'user-info', props: { userData: Object }, data() { return { userName: this.userData.name } }, template: ` div div姓名:{{userName}}/div div性别:{{userData.gender}}/div div生日:{{userData.birthday}}/div /div ` }); //Vue实例 new Vue({ el: '#app', data: { user: { name: '', gender: '', birthday: '' } }, created(){ this.getUserData(); }, methods:{ getUserData(){ setTimeout(()={ this.user = { name: '于永雨', gender……

    网友NO.916593

    浅谈vue的props,data,computed变化对组件更新的影响

    本文介绍了vue的props,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码 /** this is Parent.vue */template div div{{'parent data : ' + parentData}}/div div{{'parent to children1 props : ' + parentToChildren1Props}}/div div{{'parent to children2 props : ' + parentToChildren2Props}}/div div el-button @click="changeParentData"change parent data/el-button el-button @click="changeParentToChildren1Props"change parent to children1 data/el-button el-button @click="changeParentToChildren2Props"change parent to children2 data/el-button /div my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"/my-children1 my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"/my-children2 /div/templatescript import Children1 from './Children1'; import Children2 from './Children2'; export default{ name: 'parent', data() { return { parentD……

    网友NO.784776

    简单理解vue中Props属性

    本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: 'span{{ msg }}/span'}) 然后向它传入一个普通字符串: child msg="hello!"/child 举例 错误写法: !DOCTYPE htmlhtml lang="en"head script type="text/javascript" src="./vue.js"/script meta charset="UTF-8" titlevue.js/title/headbodypre //使用 props 传输资料予子组件 //props , data 重复名称会出现错误/prediv id="app1" child mssage="hello!"/child/divscript Vue.config.debug = true; Vue.component('child', { // declare t……

    网友NO.873285

    vue2.0 子组件改变props值,并向父组件传值的方法

    为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用; prop 作为初始值传入,由子组件处理成其它数据输出。 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'],data: function () { return { counter: this.initialCounter }} 定义一个计算属性,处理 prop 的值并返回。 props: ['size'],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }} 注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。 我们知道,父组件是使用 props 传递数据给子组件,但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。 https://cn.vuejs.org/v2/guide/components.html#自定义……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    投诉 / 推广 / 赞助:QQ:520161757