親のデータを子に渡す仕組み。propsは子コンポーネントに書く!
<sensor-save-component
ref="SaveDialog"
:auth="this.auth"
:const="this.const"
:is_auth_site="is_auth_site"
**:is_batch_process="is_batch_process"**
@onListReload="onGetList"
></sensor-save-component>
data: function () {
return {
is_batch_process : false,
:is_batch_process="is_batch_process"
子コンポーネントのpropsでデータを親から受け取る
export default {
props: {
auth:{
type: Object,
default: null
},
const:{
type: Object,
default: null
},
is_auth_site:{
type: Boolean,
default: true
},
**is_batch_process: {
type: Boolean,
default: false
}**
},
Vue.jsの**props
**オプションは、親コンポーネントから子コンポーネントにデータを渡すために使用されます。
親コンポーネントは子コンポーネントを使用する際に、**props
オプションで定義されたプロパティを指定し、その値を渡すことができます。子コンポーネントでは、渡されたデータをprops
**オプションで受け取り、コンポーネント内で使用することができます。
**props
**を使用することで、コンポーネント間でデータを効果的にやり取りすることができます。これは、Vue.jsのコンポーネントベースのアーキテクチャにおいて非常に重要な機能であり、コンポーネントの再利用性や柔軟性を向上させます。
const
はJavaScriptの予約語であり、変数を宣言するためのキーワードです。このコードでの
const
はVue.jsのコンポーネントの
props
において、親コンポーネントから渡される定数を受け取るためのプロパティを定義しています。
この**const
**プロパティは、親コンポーネントからデータを受け取るために書かれています。
Vue.jsのコンポーネントでは、**props
オプションを使用して親コンポーネントからデータを受け取ります。この場合、const
**は親コンポーネントから渡されるオブジェクトであり、子コンポーネント内で利用されることが期待されています。
**props
オプションで定義されたプロパティは、子コンポーネント内で使用されるデータとして利用されますが、コンポーネント内で定数や設定値を受け取る場合にも利用されます。そのため、このconst
**プロパティは親コンポーネントからのデータ受け取り専用であると考えられます。
mounted() {
this.$nextTick(() => {
// ビュー全体がレンダリングされた後にのみ実行されるコード
//データ取得
this.onGetList();
// propsの値をコンソールで確認
console.log('auth:', this.auth);
console.log('const:', this.const);
});
},