欢迎来到快乐学习Vue，组件访问及插槽的使用，快来学习吧 🏄🏼
文章目录
引出
🥣 父组件访问子组件：使用$children或$refs
🥣 子组件访问父组件：使用$parent
父访问子$children
<body>
<div id="app">
<zi></zi>
<zi></zi>
<button @click="getChildren">点击</button>
</div>
<template id="zi">
<div>
我是子组件
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '你好'
},
methods: {
getChildren() {
console.log(this.$children)
this.$children[0].showMessage()
for (let i of this.$children) {
console.log(i.name)
}
}
},
components: {
zi: {
template: '#zi',
data() {
return {
name: "小明·1"
}
},
methods: {
showMessage() {
console.log("showMessage 拿到了")
}
}
}
}
})
</script>
</body>
实际开发中，使用$children的次数可能并不多，原因很简单，实际业务复杂多变，对于使用数组下标的方式访问子组件，一旦子组件增加或删除，会直接导致数组下标的移位，导致bug出现，所以还有一种方式，比较推荐，就是使用 $ref
父访问子$refs
<body>
<div id="app">
<hello ref="a"></hello>
<tip ref="b"></tip>
<button @click="showMessage">获取组件message</button>
</div>
<template id="hello">
<div>
我是Hello组件
</div>
</template>
<template id="tip">
<div>
我是tip组件
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
showMessage() {
console.log(this.$refs)
console.log('hello组件message: ' + this.$refs.a.message)
console.log('tip组件message: ' + this.$refs.b.message)
}
},
components: {
hello: {
template: '#hello',
data() {
return {
message: 'Hello组件的message数据'
}
}
},
tip: {
template: '#tip',
data() {
return {
message: 'Tip组件的message数据'
}
}
}
}
})
</script>
</body>
子访问父$parent
<body>
<div id="app">
<hello></hello>
</div>
<template id="hello">
<div>
<p>我是Hello组件是Vue实例的子组件</p>
<button @click="getMessage">点击获取父组件的message</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue实例：Hello World'
},
components: {
hello: {
template: '#hello',
methods: {
getMessage() {
console.log(this.$parent)
console.log(this.$parent.message)
}
}
}
}
})
</script>
</body>
访问跟组件$root
<body>
<div id="app">
<hello></hello>
</div>
<template id="hello">
<div>
<p>我是Hello组件是Vue实例的子组件</p>
<button @click="getMessage">点击获取根组件的message</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Vue实例：Hello World'
},
components: {
hello: {
template: '#hello',
methods: {
getMessage() {
console.log(this.$root)
console.log(this.$root.message)
}
}
}
}
})
</script>
</body>
插槽 slot
基本使用
<body>
<div id="app">
<hello>
<button>我是插槽里的按钮</button>
<p>我在插槽里放p</p>
</hello>
<hr>
<hello></hello>
</div>
<template id="hello">
<div>
<h3>我是老六</h3>
<p>我是hello组件，嘿嘿🤭</p>
<slot></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
hello: {
template: '#hello'
}
}
})
</script>
</body>
具名插槽
<body>
<div id="app">
<hello>
<button slot="3">wo</button>
<span slot="2">嘿嘿</span>
</hello>
</div>
<template id="hello">
<div>
<h3>我是老六</h3>
<p>我是hello组件，嘿嘿🤭</p>
<slot name="1">
<button>我是插槽里的按钮1</button>
</slot>
<slot name="2">
<button>我是插槽里的按钮2</button>
</slot>
<slot name="3">
<button>我是插槽里的按钮3</button>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
hello: {
template: '#hello'
}
}
})
</script>
</body>
作用域插槽
<body>
<div id="app">
<hello></hello>
<hr>
<hello>
<span>java-c</span>
</hello>
<hr>
<hello>
<div slot-scope="slot">
<span v-for="item in slot.data">{{item}} - </span>
</div>
</hello>
</div>
<template id="hello">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
hello: {
template: '#hello',
data() {
return {
pLanguages: ['JavaScript', 'C++', 'Java', 'Python', 'Go']
}
}
}
}
})
</script>
</body>
