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>