溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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>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>直接在子組件中使用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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
