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的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue父子组件间传值(props)

    先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • vue prop属性传值与传引用示例

    vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组或对象类型也以值形式传递怎么办呢?如下方式可以实现: // component-A 引用component-B组件 <component-B :person="personList" :personBak="person_Bak"> </component-B> // compone

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

    为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因: prop 作为初始值传入后,子组件想把它当作局部数据来用: prop 作为初始值传入,由子组件处理成其它数据输出. 对这两种原因,正确的应对方式是: 定义一个局部变量,并用 prop 的值初始化它: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 定义一个计算属性,处理 prop 的值并返回. prop

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

  • vue-prop父组件向子组件进行传值的方法

    vue-prop是父组件向子组件进行传递数据时使用的. 例如子组件为 child.vue template: '<div>msg: {{msg}}</div>' props: ['msg'], 我们在子组件里规定了一个数据名字叫msg 父组件里面写 <child msg="hello, vue.js!"></child> 这样我们就可以在子组件里看到msg:hello, vue.js! 以上这篇vue-prop父组件向子组件进行传值的方法

  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

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

    如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值: <code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: ['type'], template: '<div @cli

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • 浅谈python在提示符下使用open打开文件失败的原因及解决方法

    题目:在提示符下使用open打开一个文件 刚开始网上看了下打开的方式,结果一直实现不了,报错是没找到这个文件,而且和我输入的文件名不一样. 错误如下: >>>open('d:\456.txt') Traceback (most recent call last): File "<pyshell#0>", line 1, in <module> open('d:\456.txt') IOError: [Errno 2] No such file

  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法.分享给大家供大家参考,具体如下: AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护. 父页面parent.html代码如下: <html> <head> <script src="angular-1.2.2/angular.js">&

  • ThinkPHP调用common/common.php函数提示错误function undefined的解决方法

    本文主要介绍了ThinkPHP调用common/common.php函数提示错误function undefined的解决方法.对于采用ThinkPHP进行项目开发的朋友来说,在进行ThinkPHP升级后经常会遇到这类问题.具体描述如下: 在对ThinkPHP升级后使用了最新的ThinkPHP3.2版本,将通用的函数放到了common/common.php中,但是在具体页面调用函数时出现了function undefined的错误提示. 在查看了官方文档后发现,原来ThinkPHP3.2版本co

  • python中print的不换行即时输出的快速解决方法

    关于Python2.x和3.x带来的print不换行的问题:昨天有发过推文,利用end = 定义,解决了横向的小问题,但是由于屏幕显示的问题,若字符串长度过大,则会引起不便.两个或多个print做分割的情况下,如何保持依然横向输出,一般的是在print尾部加上逗号(,)但是在3.x下,则不行,需要使用end = "(something)",some signs like , . ; 'also you can put a word or str in"". Exam

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

随机推荐