1. 提供とオブジェクト - 階層的にネストされたデータ通信の処理
- provideはオブジェクトを返す関数です。
- injectはprovideから渡されたオブジェクトを受け取る配列です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3.サブコンポーネントを使う>
<App></App>
</div>
<script src="./vue.js"></script>
<script>
// provide
// inject
// 親コンポーネントのprovideが変数を提供し、子コンポーネントがオブジェクトを介して変数をインジェクトする。.コンポーネントがどんなに深くネストされていても
// セントラル・イベント・バス バス
Vue.component('B', {
data() {
return {
count: 0
}
},
//オブジェクトを介してprovideからオブジェクトを受け取る
inject:['msg'],
created(){
console.log(this.msg);
},
template: `
<div>
{{msg}}
</div>
`,
})
Vue.component('A', {
data() {
return {
}
},
created(){
//this "を経由する.$parent親コンポーネントのデータを取得し、連続的な連鎖をサポートする。
console.log(this.$parent.$parent);
console.log(this.$children);
console.log(this);
},
template: `
<div>
<B></B>
</div>
`
})
const App = {
data() {
return {
title:"
}
},
//provide
provide(){
return {
msg:"ポップスのデータ"
}
},
template: `
<div>
<A></A>
</div>
`,
}
new Vue({
el: '#app',
data: {
},
components: {
// 2.サブコンポーネントをマウントする
App
}
})
</script>
</body>
</html>
