1、slot插槽
slot就是子组件里给DOM留下的坑位，动态的DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
var parent = {
template: `
<div>
我是父组件
<slot name="haah"></slot>
</div>
`
}
new Vue({
el: '#app',
template: `
<parent>
<div slot="haah">我是插槽haah</div>
<div>我也是插槽但是不会显示因为我没有指定slot名称</div>
</parent>
`,
components: {
parent
}
})
</script>
</body>
</html>
2、ref获取子组件实例
a、识别：在子组件或元素上使用属性ref="xxx"
b、获取：this.$refs.xxx获取元素
$el 获得元素DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
var child = {
template:`
<div>我是子组件
<br>
<input type="text" v-model="name" value="name">
</div>
`,
data() {
return {
name:'123'
}
}
}
var parent = {
// 使用子组件
template: `
<div>
我是父组件
<child ref="childs"></child>
<button @click="getdata">通过this.$refs操作子组件属性</button>
</div>
`,
// 注册子组件
components: {
child
},
methods:{
getdata(){
this.$refs.childs.name = '456';
}
}
}
new Vue({
el: '#app',
template: `
<div>
<parent>
</parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html>
3、$parent获取父组件实例
直接在子组件中使用this.$parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
var child = {
template: `
<div>我是子组件
父组件的ID为：{{id}}
<button @click='getID'>点我获得父组件ID</button>
<br>
</div>
`,
methods: {
getID() {
this.id = this.$parent.msg
}
},
data() {
return {
id: ''
}
}
}
var parent = {
// 使用子组件
template: `
<div>
我是父组件
我的ID：{{msg}}
<child></child>
</div>
`,
// 注册子组件
components: {
child
},
data() {
return {
msg: '123'
}
}
}
new Vue({
el: '#app',
template: `
<div>
<parent>
</parent>
</div>
`,
components: {
parent
}
})
</script>
</body>
</html>