2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

laravelのpropsとは(初心者理解)

Last updated at Posted at 2024-03-20

親のデータを子に渡す仕組み。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);
    });
},
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?