-
slot插槽
-
ref获取子组件实例
-
p a r e n t 获 取 父 组 件 实 例 ( 可 在 子 组 件 直 接 使 用 t h i s . parent获取父组件实例(可在子组件直接使用this. parent获取父组件实例(可在子组件直接使用this.parent即可)
slot插槽:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot及ref</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
//声明局部组件
var Parent = {
template:
`<div>
我是父级组件
<slot name="hello"></slot>
<slot name="world"></slot>
</div>`
}
new Vue({
el:'#app',
//注册
components:{
Parent
},
//使用
template:
`<div>
<parent>
<div slot="hello">我是插槽内容1</div>
<div slot="world">我是插槽内容2</div>
</parent>
</div>`,
data(){
return {
}
}
})
</script>
</html>
运行效果图:
ref、$parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot及ref</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<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>
<slot name="world"></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 slot="hello">我是插槽内容1</div>
<div slot="world">我是插槽内容2</div>
</parent>
</div>`,
data(){
return {
}
}
})
</script>
</html>