【Vue 5分】5分でvueコンポーネントの階層関係がわかる

序文

その前に、私たちは Vue コンポーネントとは何か、そしてそれらが何をするのかを学びました. コンポーネントに関するブログについては、ブロガーの以前のブログを読むことができます: [Vue 5 分] 5 分で vue コンポーネントを理解できます_ Cupid Punishes Lu のブログ - CSDN ブログ

詳細については、他のブログ投稿をフォローしてください。さて、今日のトピックに入りましょう。コンポーネントを呼び出すことができ、Web ページを分割してページにネストすることができ、コンポーネントレベルで親子および兄弟レベルの関係を形成できることを知っています。これにより、Web ページの開発が容易になります豊富な層。

まず、グローバルコンポーネントの階層関係

グローバルコンポーネント間の階層関係は、Vue がコードプログラムを実行するときに決定されます。コードプログラムを通してそれについて学ぶことができます：

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>层级关系</title>
</head>
<body>
    <div id="app">
     <top></top>
     <middle></middle>
     <bottom></bottom>
    </div>

<template id="N1">
    <!-- 我们定义第一个组件 -->
    <div>
        <h2>第一个 ：NO.1</h2>
        <bottom></bottom>
    </div>
</template>

   <!-- 我们定义第二个组件 -->
<template id="N2">
    <div>
        <h2>第二个 ：NO.2</h2>
        <bottom></bottom>
    </div>
</template>

   <!-- 我们定义三个组件 -->
   <template id="N3">
    <div>
        <h3>第三个 ：NO.3</h3>
    </div>

   </template>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        Vue.component('top',{
            template:'#N1'
        });
        Vue.component('middle',{
            template:'#N2'
        });
        Vue.component('bottom',{
            template:'#N3'
        });

var  vm = new Vue({
    el:"#app",

})

    </script>
</body>

</html>

操作結果:

上記でトップ、ミドル、ボトムの3つのグローバルコンポーネントを定義し、トップコンポーネントとミドルコンポーネントを使ってボトムコンポーネントを呼び出すことで、トップとボトム、ミドルとボトムの間に親子関係があることがわかります。レベル関係。

すると、この例ではアプリが同時に3つのコンポーネントを呼び出しており、3つのコンポーネントはすべてレベル関係にあるため、呼び出し時にコンポーネント間の階層関係が決まることがわかります。

第二に、ローカルコンポーネントの階層関係

グローバルコンポーネントの関係を理解したので、ローカルコンポーネントの階層関係も同様であると言えます. ローカルコンポーネント間の階層関係は、それらが定義されると、各コンポーネントはコンポーネントの設定オプションを持ちます. 次のセットのセットレベルのコンポーネント。サンプルコードを通してそれを理解することができます:

コード例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>层级关系</title>
</head>
<body>
    <div id="app">
     <top></top>

    </div>

<template id="N1">
    <!-- 我们定义第一个组件 -->
    <div>
        <h2>这里是父组件</h2>
        <top-child></top-child>
        <middle-child></middle-child>
    </div>
</template>

   <!-- 我们定义第二个组件 -->
<template id="N2">
    <div>
        <h2>这里是第一个子组件</h2>
    </div>
</template>

   <!-- 我们定义三个组件 -->
   <template id="N3">
    <div>
        <h3>这里是第二个子组件</h3>
    </div>

   </template>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vm = new Vue({
    el:"#app",
  components:{
    "top":{
        template:"#N1",
        components:{
            "top-child":{
                template:"#N2",
            },
            "middle-child":{
                template:"#N3",
            }
        }
    }
  }
})

    </script>
</body>

</html>

操作結果:

2 つのサブコンポーネント top-child と middle-child が top コンポーネントのコンポーネント設定オプションで設定されていることがわかります.2 つのサブコンポーネントはレベルなので、2 つのコンポーネント間の関係はレベルです. , の親コンポーネントどちらもトップです。

ビューを開くと、親コンポーネントと子コンポーネントを同時に呼び出すことはできず、gust は親コンポーネントで子コンポーネントを呼び出すことがわかります。