vue.js 组件问题

最新推荐文章于 2023-02-03 18:33:57 发布

qq_26940567

最新推荐文章于 2023-02-03 18:33:57 发布

阅读量137

点赞数

分类专栏： vue 文章标签： vue 组件坑

本文链接：https://blog.csdn.net/qq_26940567/article/details/78741564

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
<script src="../../vue.js"></script>
</head>
<div id="app">
<button @click="toknowchildren">点击让子组件显示</button>
<table>
<tr>
<td>索引</td>
<td>ID</td>
<td>说明</td>
</tr>
<tr is="the-tr" v-for="(i,index) in items" v-bind:id="i" :index="index"></tr>
<the-tr v-for="(i,index) in items" :id="i" :index="index"> </the-tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4]
},
methods: {
toknowchildren: function () { //切换组件显示
console.log(this.$children);
}
},
components: {
theTr: { //第一个子组件
template: "<tr>" +
"<td>{{index}}</td>" +
"<td>{{id}}</td>" +
"<td>这里是子组件</td>" +
"</tr>",
props: ['id','index']
}
}
});
</script>
</body>

</html>

注意组件坑