1.親コンポーネントが子コンポーネントに値を渡す：propsを介した通信
- 子コンポーネントでpropsを宣言すると、親コンポーネントに実装されているプロパティを受け取ります。
- サブコンポーネントのテンプレート内で任意に使用可能。
- カスタムプロパティを親コンポーネントにバインド
<!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>
// グローバルコンポーネント
// :propを介して通信する
// 1.親コンポーネントに実装されたプロパティを受け取るために、子コンポーネントでpropsを宣言する
// 2.子コンポーネントのテンプレート内で任意に使用できる。
// 3.親コンポーネントにカスタムプロパティをバインドする
//
Vue.component('Child',{
template:`
<div>
<h3>子コンポーネント</h3>
<h4>{{childData}}</h4>
</div>
`,
props:['childData'] //propsこの後に配列が続く。
})
//
const App = {
data() {
return {
msg: '親コンポーネントから渡される値'
}
},
template: `
<div>
<Child :childData = 'msg'></Child>
</div>
`,
computed: {
}
}
//Vueをインスタンス化し、アプリノードにマウントする
new Vue({
el: '#app',
data: {
},
components: {
// 2.子コンポーネントをマウントする
App
}
})
</script>
</body>
</html>
1.1 サブコンポーネント・プロップのレセプションの2つの形態
- props配列
- プロップはオブジェクトにすることができ、オブジェクトの場合は、渡された値の型とデフォルト値を指定するように設定できます。
<template>
<div>
<div> </div>
<p>{{sendContent}}</p>
</div>
</template>
<script>
export default {
data() {
return {
text: '子コンポーネント内の要素',
};
},
//
// props: [
// "sendContent"
// ]
//
props: {
sendContent: {
type: String,
default: " "
}
}
};
</script>
<style lang="scss" scoped>
</style>
2.子コンポーネントから親コンポーネントへの値の受け渡し
- 親コンポーネント内の子コンポーネントへのカスタムイベントのバインド
@inputHandler = 'input'
- サブコンポーネント内で ネイティブイベントをトリガーします。カスタムイベントinputHandlerをトリガーします。
<!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>子コンポーネントから親コンポーネントへ値を渡す</title>
</head>
<body>
<div id="app">
<!-- 3.子コンポーネントを使う -->
<App></App>
</div>
<script src="./vue.js"></script>
<script>
// 子から親へ値を渡す
// 親コンポーネント内の子コンポーネントにカスタムイベントをバインドする 親コンポーネント内の子コンポーネントにカスタムイベントをバインドする
// 子コンポーネント内でネイティブイベントをトリガーする イベント関数内でthis.$emitを介してカスタムイベントinputHandlerをトリガーするthis.$emitカスタムイベントをトリガーする
Vue.component('Child', {
template: `
<div>
<h3>子コンポーネント</h3>
<h4>{{childData}}</h4>
<input type="text" @input = 'handleInput'/>
</div>
`,
props: ['childData'],
methods:{
handleInput(e){
const val = e.target.value;
this.$emit('inputHandler',val);
}
},
})
const App = {
data() {
return {
msg: '親コンポーネントから渡される値',
newVal:''
}
},
methods:{
//親コンポーネント内の関数で、子コンポーネントからの値の受け取りを担当する。
input(newVal){
// console.log(newVal);
this.newVal = newVal;
}
},
template: `
<div>
<div class='father'>
:{{newVal}}
</div>
<Child :childData = 'msg' @inputHandler = 'input'></Child>
</div>
`,
computed: {
}
}
new Vue({
el: '#app',
data: {
},
components: {
// 2.子コンポーネントをマウントする
App
}
})
</script>
</body>
</html>
