001_0202插槽和获取子实例父实例(h3)
-
slot插槽
- slot就是子组件里给DOM留下的坑位
- <子组件>DOM</子组件>
- slot是动态的DOM
-
ref获取子组件实例
- 识别：在子组件或元素上使用属性ref=“xxxx”
- 获取：this.$refs.xxxx 获取元素
- $el 是拿其DOM
-
$parent获取父组件实例（可在子组件直接使用this.$parent即可）
-
源代码
<!DOCTYPE html>
<html>
<head>
<title>组件化开发</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/* 创建组件的第一种方式第一步：局部声明 */
var Child_dl={
template:`
<div>我是子组件aaa</div>
`,
data(){
return {
msg:'just the return of Child_dl msg_dl'
}
},
/* 钩子函数 */
created(){
/* VueComponent 获取整个组件 父子之间的通信*/
console.log('01============'+this.$parent)
}
}
/* 创建组件的第一种方式第一步：局部声明 */
var Parent_dl={
template:`
<div>
我是父组件bbb
<slot name='slot_name_dl01'></slot>
<slot name='slot_name_dl02'></slot>
<child_dl ref='child_name_dl'></child_dl>
</div>
`,
components:{
Child_dl
},
data(){
return {
parents:'我是父组件aaa'
}
},
/* 钩子函数 */
mounted(){
/* VueComponent 获取整个组件 父子之间的通信*/
console.log('02============'+this.$refs.child_name_dl)
/* VueComponent 获取组件的DOM*/
console.log('03============'+this.$refs.child_name_dl.$el)
}
}
new Vue({
el:'#app',
/* 创建组件的第一种方式第二步：注册组件 */
components:{
Parent_dl
},
/*
01 组件名和标签名的匹配规则
02 在这里，如果parent_dl组件在声明时没有预留插槽，那么这个组件内的内容不能被渲染
*/
template:`
<div>
<parent_dl>
<div>我是插槽内容1</div>
<div slot='slot_name_dl01'>我是插槽内容2</div>
<div slot='slot_name_dl01'>我是插槽内容3</div>
<div slot='slot_name_dl02'>我是插槽内容4</div>
<div slot='slot_name_dl03'>我是插槽内容5</div>
</parent_dl>
</div>
`,
data(){
return{}
},
})
</script>
</body>
</html>
- 浏览器界面
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
