props、$children、ref、slotがある。
props
<!DOCTYPE html>
<title>props</title>
<div id="app">
<app-component v-bind:message="parentMessage"></app-component>
<button v-on:click="onClick">クリック</button>
</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
Vue.component('app-component', {
template: '<h1>{{ message }}</h1>',
props: {
message: {
type: String,
default: 'これは子のコンポーネント'
}
}
})
new Vue({
el: '#app',
data: {
parentMessage: '親から渡してるよ'
},
methods: {
onClick: function () {
this.parentMessage = 'クリックしたら変わるよ'
}
}
})
</script>
$children
<!DOCTYPE html>
<title>$children</title>
<div id="app">
<app-component></app-component>
<button v-on:click="onClick">クリック</button>
</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
Vue.component('app-component', {
template: '<h1>{{ message }}</h1>',
data: function () {
return {
message: 'これは子のコンポーネント'
}
}
})
new Vue({
el: '#app',
methods: {
onClick: function () {
this.$children[0].message = 'クリックしたら親から渡すよ'
}
}
})
</script>
$children に対して順序の保証がなく、リアクティブでないことに注意してください。
公式ドキュメント https://jp.vuejs.org/v2/api/index.html#vm-children より引用。
ref
<!DOCTYPE html>
<title>ref</title>
<div id="app">
<app-component ref="ac"></app-component>
<button v-on:click="onClick">クリック</button>
</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
Vue.component('app-component', {
template: '<h1>{{ message }}</h1>',
data: function () {
return {
message: 'これは子のコンポーネント'
}
}
})
new Vue({
el: '#app',
methods: {
onClick: function () {
this.$refs.ac.message = 'クリックしたら親から渡すよ'
}
}
})
</script>
slot
<!DOCTYPE html>
<title>slot</title>
<div id="app">
<app-component><h1 slot="message">{{ parentMessage }}</h1></app-component>
<button v-on:click="onClick">クリック</button>
</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
Vue.component('app-component', {
template: '<div><slot name="message">これは子のコンポーネント</slot></div>'
})
new Vue({
el: '#app',
data: {
parentMessage: '親から渡してるよ'
},
methods: {
onClick: function () {
this.parentMessage = 'クリックしたら変わるよ'
}
}
})
</script>