javascript - vue组件传值props的问题
本文介绍了javascript - vue组件传值props的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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用的不对？代码可能有点乱，抱歉。谢谢各位帮忙说下是不是错的很离谱。
解决方案
写法有问题，把
data:function(){
return{
zjName:"io",
}
},
props:['zjName']放到上面
变成
var childVal = Vue.extend({
template:'#childVal',
data:function(){
return{
zjName:"io",
}
},
props:['zjName']
});还有就是你已经在data里定义了zjName，应该换个名称
这篇关于javascript - vue组件传值props的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
