-
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="vue.js"></script>
<script type="text/javascript">
var Child={
template:`
<div>我是子组件</div>
`,
data(){
return {
msg:'hello'
}
},
created(){
console.log(this.$parent)
}
}
var Parent={
template:`
<div>
我是父组件
<slot name='hello'></slot>
<child ref='childs'></child>
</div>
`,
components:{
Child
},
data(){
return {
parents:'我是父组件'
}
},
mounted(){
// console.log(this.$refs.childs)
}
}
new Vue({
el:'#app',
components:{
Parent
},
template:`
<div>
<parent>
<div>我是插槽内容</div>
<div slot='hello'>我是插槽内容2</div>
</parent>
</div>
`,
data(){
return{}
},
})
</script>
</body>
</html>
