<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>vue TODO</h1>
<my-todo v-bind:items="todoList">
</my-todo>
<hr>
<h2>v-for 和 ref 结合使用</h2>
<ul>
<todo ref="li" v-for="(item,i) in todoList" :key="i" :todo="item.do"></todo>
</ul>
</div>
<template id="tempA">
<div>
<span>{{datas.isa}}</span>
</div>
</template>
<script src="vue.min.js"></script>
<script>
Vue.component("todo", {
props: ["todo"],
render(h) {
return h("li", this.todo);
}
});
Vue.component("my-todo", {
props: ["items"],
render(h) {
console.log("my-todo");
if (this.items.length) {
const todo = this.items.map((item) => {
return h("todo", {
props: { todo: item.do },
ref: "ref-li",
refInFor: true // 使用map生成一个vNode数组，开启 refInFor: true，this.$refs.["ref-li"] 是一个数组
// refInFor 如果不开启，获取到的是最后一个元素或者子组件
});
});
return h("ol", todo);
} else {
return h("p", "no todo");
}
},
mounted() {
// 在父组件中获取注册了 ref 特性的子组件的
console.log(`this.$refs["ref-li"]`)
console.log(this.$refs["ref-li"]);//数组
}
});
const app = new Vue({
el: "#app",
data: {
todoList: [{ do: "eat" }, { do: "code" }]
},
mounted() {
console.log("app");
console.log("this.$refs.li")
console.log(this.$refs.li)
}
});
</script>
</body>
</html>
网友评论