问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue组件传值props的问题

头像
745984265
    18713749
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="./css/weui.css" rel="stylesheet">
<script type="text/javascript" src="./js/vue.js"></script>

</head>
<body>
<template id="parentVal">
  <div>
    <div>{{hyname}}</div>
    <child :zj-name="hyname"></child>
  </div>
</template>
<template id="childVal">
  <div>{{zj-name}}</div>
  <div></div>
  <input></input>
</template>
<div id="parentChild">
  <span>{{uiname}}</span>
  <parent v-bind:name="uiname"></parent>
</div>
<script type="text/javascript">
  var childVal = Vue.extend({
    template:'#childVal'
  });
  Vue.component(
    "parent",

    {
      data:function(){
        return {
          hyname:"120"
        }
      },
      
      template:'#parentVal',
      components:{
        props:['zjName'],
        'child':childVal,
        data:function(){
          return{
            zjName:"io"
          }
        }
      },
      ready:function(){
        console.log(this)
      }
    }
  )
  new Vue({
    el:'#parentChild',
    data:{
      uiname:'hj'
    }
    
  })
</script>

    </body>
    </html>

    我这样运行结果是子组件<div>{{hyname}}</div>为NAN，控制套提示[Vue warn]: Attribute ":zj-name" is ignored on component <child> because the component is a fragment instance: http://vuejs.org/guide/compon...，，难道是我props用的不对？代码可能有点乱，抱歉。谢谢各位帮忙说下是不是错的很离谱。

    javascript
    阅读 6.3k
    1 个回答
    得票最新
    头像
    Runnoob
      35644861
      ✓ 已被采纳

      写法有问题，把

      data:function(){
            return{
                zjName:"io",
            }
        },
        props:['zjName']

      放到上面
      变成

      var childVal = Vue.extend({
        template:'#childVal',
        data:function(){
            return{
                zjName:"io",
            }
        },
        props:['zjName']
    });

      还有就是你已经在data里定义了zjName，应该换个名称

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题