Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス

Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

青灯夜游

リリース： 2022-11-08 20:25:38

転載

1689 人が閲覧しました

Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?以下の記事では、父から息子、息子から父への方法を紹介していますので、ぜひ参考にしてください。

Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

#1. 親コンポーネントを子コンポーネントに渡す

⭐⭐

vuejs ビデオチュートリアル、Web フロントエンド開発]

## ここで、親コンポーネントに子によって表示する必要があるデータがあることがわかります。コンポーネントの場合、

props
コンポーネント間の通信を完了するには

プロパティを介してコンポーネント間の通信を完了するには

Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

##2. Props についての簡単な説明

⭐⭐ では、

Props

とは何ですか? ?
関数: 親コンポーネントによって渡されたプロパティを受け入れます

Props
親コンポーネントはこれらの属性 (属性) に値を割り当て、子コンポーネントは属性の名前を通じて対応する値を取得します;
単一ファイルコンポーネントでは

props

defineProps() マクロを使用して次を宣言できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script> const props = defineProps([&#39;foo&#39;]) console.log(props.foo) </script></pre><div class="contentsignin">ログイン後にコピー</div></div>1) 配列型

# は使用されません

script setup のコンポーネントでは、props

オプションを使用して

prop を宣言できます:

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

ログイン後にコピー

例、オブジェクトの使用構文

App.vue

は、整数 props

```
<template>
	<show-info></show-info>
</template>
```
ログイン後にコピー
# で定義されたコンポーネントと属性を使用します。 #showInfo.vue

 export default {
        props:{
            name :{
                type:String,
                default:"我是默认值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

ログイン後にコピー

Also:それでは、どのような型が考えられるのでしょうか?

#文字列

数値

ブール値

オブジェクト
日付
Function
Symbol
2) オブジェクト型
は

の形式で宣言されます。 props (これは非常に一般的に使用されます)

Use

script setup

defineProps({
  title: String,
  likes: Number
})

ログイン後にコピー

non-script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

ログイン後にコピー

3. 子コンポーネントは親コンポーネントに渡されます

⭐⭐

子コンポーネントは親コンポーネントに渡され、$ を通じてイベントがトリガーされます放出 # 子コンポーネントは親コンポーネントにコンテンツを渡します:

子コンポーネントで何らかのイベントが発生すると、コンポーネントの場合、親コンポーネントはコンテンツを切り替える必要があります;

子コンポーネントに親コンポーネントに渡したいコンテンツがある場合; Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

$emit("add", count )

最初のパラメータはカスタマイズされたイベント名で、2 番目のパラメータは渡されたパラメータです。

⭐⭐

ここには 2 つのパラメータがあります。サブコンポーネントと親コンポーネント

サブコンポーネントは、場合によってトリガーされるイベントの名前で定義されます

親コンポーネントで、監視するイベントの名前を渡しますv-on (構文シュガー @) の形式で、対応するメソッドにバインドします。
#最後に、子コンポーネントでイベントが発生すると、イベント名に従って対応するイベントがトリガーされます

1) 親コンポーネント
#親コンポーネントは、子コンポーネントによって発行されたカスタムイベントをリッスンし、対応する操作を実行します

<template>
    <div>
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
   <add-counter></add-counter>  
   <!-- 2.自定义su-counter组件，监听内部的sub事件 -->
   <sub-counter></sub-counter>
   </div>
</template>
<script>
import AddCounter from &#39;./AddCounter.vue&#39;
import SubCounter from &#39;./SubCounter.vue&#39;
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

ログイン後にコピー

2) サブコンポーネント 1AddCounter .vue

ここで定義されているのはカウンターの加算演算です

<template>
    <div>
        <button>+1</button>
        <button>+5</button>
        <button>+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 让子组件发出去一个自定义事件
                // 第一个参数自定义的事件名称，第二个参数是传递的参数
                this.$emit("add",count)
            }
        }
    }
</script>

ログイン後にコピー

SubCounter.vue

ここで定義されているのはカウンターのデクリメント操作です

サブコンポーネントのイベントトリガーその後 # を通じてイベントが発行されます##this.$emit

<template>
    <div>
        <button>-1</button>
        <button>-5</button>
        <button>-10</button>
    </div>
</template>
<script>
    export default {
        // 1.emits数组语法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>

ログイン後にコピー

このケースは非常に古典的なものなので、何度でも考えることができます~

(学習ビデオの共有: プログラミングの基本ビデオ

)

以上がVue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。