vue.js的组件模板里面的子元素属性被解析到根元素QAQ
我做了酱紫一个Vue.js的组件：
//nav.js文件的代码
Vue.component('nav-ul-li', {
props:["url"],
template: '<li> <a :href="url"><slot></slot></a> </li>'
})
写了酱紫一个文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Document</title>
<script src="/js/vue.js"></script>
<script src="/js/nav.js"></script>
</head>
<body>
<div id="frame">
<nav id="top">
<ul class="nav_top">
<!--就是这个AAA-->
<nav-ul-li v-for="data in datas" :href="data.src">{{data.title}}</nav-ul-li>
</ul>
</nav>
</div>
<script>
var Crowdfunding = new Vue({
el: '#frame',
data: {
datas: [
{ title: 'Test Data' , src: "#"},
{ title: 'Test Data' , src: "#"},
{ title: 'Test Data' , src: "#"},
{ title: 'Test Data' , src: "#" }
]
}
})
</script>
</body>
</html>
结果，<nav-ul-li v-for="data in datas" :href="data.src">{{data.title}}</nav-ul-li>被解析成酱紫TAT：
<li href="#"><a>Test Data</a></li>
它的我给a标签留的href属性为什么会被li标签抢走TAT???
莫回无1回答
-
尚方宝剑之说
li表示这个锅它不背，因为你传给nav-ul-li组件的prop是href，而组件内部定义的props是url。这样改一下就好了：<nav-ul-li v-for="data in datas" :url="data.src">{{data.title}}</nav-ul-li>
随时随地看视频慕课网APP
相关分类
JavaScript