Vueフレームワーク学習（5）コンポーネント開発と親子コンポーネント転送値

その他 2021-03-30 13:36:22 訪問数: null

セクション6：Vueコンポーネント化された開発（1）-コンポーネントとは

1.コンポーネントとは

1.1個人の理解

最も簡単な理解は、コンポーネントも小さなVueインスタンスと同等であり、コンポーネントはインスタンスのさまざまなプロパティを持つこともできるということです。

组件是一个完整的单位个体，可以有js可以有css和html。（現在、cssとjsは含まれていません）。

1.2全体的な理解

htmlを開発した人なら誰でも知っていることですが、実際、私たちのインターフェースはdivのレイアウトで表示され、各divには対応する表示コンテンツがあります。これらのdiv全体を想像すると、全体を埋め込むことができます。私たちのインターフェースは小さなモジュールになります。

Vueコンポーネントの開発はこのモードです先定义一个个组件(相当于一个div)，组件可以嵌套，然后组成一个整体。

次の図に示すように、通常、アプリケーションはネストされたコンポーネントツリーの形式で編成されます。
[外部リンク画像の転送に失敗しました。ソースサイトに盗難防止リンクメカニズムがある可能性があります。画像を保存してアップロードすることをお勧めします。直接（img-vJk7T308-1612834014926）（vue notes 2_files / 1.jpg）]

1.3コンポーネントの利点

可复用

低耦合

第二に、Vueコンポーネントの最初の使用

2.1コンポーネントを作成する最初の方法：

Vue.componentコンポーネントの作成に使用

  • 最初のパラメーターはコンポーネントの名前です（つまり、後で使用する要素識別子）
  • 2番目のパラメーターはオブジェクトであり、その中には多くのパラメーターがあります。現在、表示コンテンツを格納する場所は1つのテンプレート（テンプレート）のみです。
Vue.component('component1',{
	template::`
	<div> 
	<h1>hello</h1>
	<h1>我的第一个组件</h1>
	</div>
	`
});

2.2コンポーネントを作成する2番目の方法：

Vueインスタンスに登録し、最初にオブジェクトを定義してから、インスタンスのcomponentsプロパティにコンポーネントを登録します

//创建组件2 先定义好对象，然后在实例的components属性上把组件注册
const componentA ={
	template:`
	<div><h2>我的第二个组件 Hi </h2> </div>
	`
}
const app = new Vue({
	el:"#app",
	data: {
		number: 0
	},
	components:{
		'compontent2':componentA
	}
})

2.3コンポーネントの使用

1）Vueを使用してコンポーネントを作成するにはどうすればよいですか？

コンポーネントを作成するとき、Vue.componentを使用して作成されている第一个参数場合、コンポーネントに登録されている場合は、すべてのロゴが定義されています。对象的名称

2）使用（識別名でコンポーネントを直接使用）

组件的使用必须在Vue实例的div里，超出的实例，vue无法管理就无法使用这个组件了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello Vue</title>
	</head>
	<body>
		<div id="app">
			<!--直接用标识名称来使用组件-->
			<component1></component1>
			<!--组件复用-->
			<component1></component1>
			<component1></component1>
			<component2></component2>
		</div>
	</body>
	<script src="./vue.js"></script>
	<script>
	        // 创建组件1
			Vue.component('component1',{
				template:`
				<div> 
				<h1>hello</h1>
				<h1>我的第一个组件</h1>
				</div>
				`
			});
			//创建组件2 先定义好对象，然后在实例的components属性上把组件注册
			const component2 ={
				template:`
				<div> <h2>我的第二个组件 Hi </h2> </div>
				`
			}
			const app = new Vue({
				el:"#app",
				components:{
					'component2':component2
				}
			})
			
	</script>
</html>

第三に、Vueコンポーネントテンプレートの個別の書き込み方法

3.1なぜ別々の書き込みを使用するのですか？

知っ组件的展示内容是在属性template定义好的ていると、divのコンテンツがオブジェクトに直接書き込まれていることがわかります。単純なコンテンツがまだ可能である場合でも、実際の開発はより複雑で機能的である必要があります。そうである場合直接写在对象里就有点不好维护、理解するのは簡単ではありません。コード。このテンプレートに対応するdivがリリースされると、コンポーネントオブジェクトは適切に維持されます

3.2要素を分離する方法

個別に実行できる要素タグテンプレートがあります。定義後、定义好id，然后在对象里用’#id’就可以了

<template id="component3">
	<div>
		<h2>hhhhhhhhhhh</h2>
	</div>
</template>

<!-- 组件的对象使用（’#id’）  -->

Vue.component("component3",{
	template: '#component3'
});

4、Vue-グローバルコンポーネントとローカルコンポーネント

4.1グローバルコンポーネントとは何ですか？

グローバルコンポーネント：使用されている限りVue.component 来创建的组件都是全局注册的。つまり、登録後に新しく作成されたVueルートインスタンス（新しいVue）のテンプレートで使用でき、ローカルコンポーネントとサブコンポーネントの両方を使用できます。
たとえば、2つの新しいVue（）をインスタンス化する場合、このグローバルコンポーネントは両方のインスタンスで使用できます。（ただし、通常は2つのインスタンスを作成しません）
次のコードは、インスタンスappとapp1の両方で使用できるグローバルコンポーネントを作成したことを示しています。

<body>
<div id="app"  >
    <component1></component1>
</div>
<div id="app1" >
    <component1></component1>
</div>

<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    Vue.component('component1', {
        template: '#component1'
    });
    const app = new Vue({
        el: '#app'
    })
    const app1 = new Vue({
        el: '#app1'
    })
</script>

4.2部分コンポーネントとは何ですか？

地方議会：中实例的属性componentsまたは组件里的属性components登録コンポーネントに、と呼ばれる局部组件、局部注册的组件在其子组件中不可用あなたは複数のネストされたを必要と使用する場合

次のコードを使用して説明します。インスタンスでは、component2コンポーネントのみが使用され、component1がインスタンスに登録されていないためcomponent1は使用できません。

<body>
<div id="app"  >
    <component1></component1>
    <!-- component2使用会报错 -->
    <component2></component2>
</div>
<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
    </div>
</template>
<template id="component2">
    <div style="background: aqua">
        <component1></component1>
        <h2>我的第二个组件</h2>
    </div>
</template>

</body>
<script src="./vue.js"></script>
<script>
	const component1 = {
        template: '#component1'
    }
    const component2 = {
        template: '#component2',
        components: {
            'component1': component1
        }
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
	       <!--'component1': component1  -->
        }
    })
</script>

デモ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app"  >
    <component1></component1>
    <component2></component2>
</div>

<div id="app1" >
    <component1></component1>
</div>

<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
        <h2>你们好</h2>
    </div>
</template>

<template id="component2">
    
    <div style="background: aqua">
        <component1></component1>
        <h2>我的第二个组件</h2>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 全局组件：只要是用 Vue.component 来创建的组件都是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，局部组件和子组件都能使用
     * 比如你实例了两个new Vue();这个全局组件就可以在这两个实例上都可以使用。（但是我们一般不会创建两个实例）
     * */
    Vue.component('component1', {
        template: '#component1'
    });

    /**
     * 局部组件：在实例的属性components或者是组件里的属性components上注册组件，叫局部组件，局部注册的组件在其子组件中不可用，如果要使用需要多重嵌套
     * @type {
   
   {template: string}}
     */
    const component2 = {
        template: '#component2'
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })

    const app1 = new Vue({
        el: '#app1',
    })

</script>
</html>

5、Vue-親コンポーネントと子コンポーネント

5.1親子コンポーネントとは何ですか？

実際、コンポーネントはコンポーネントを介して登録され、コンポーネントにネストされます嵌套注册组件的就是子组件，被嵌套就是父组件。

図に示すように、赤い領域が親コンポーネントで、内側にネストされた青い領域が子コンポーネントです。
[外部リンク画像の転送に失敗しました。元のサイトに盗難防止チェーンメカ​​ニズムがある可能性があるため、保存することをお勧めします。画像を直接アップロードします（img-QZCwS4kA-1612834014930）（vue note 2_files / 2.jpg）]

注意：全局组件不存在父组件和子组件的，因为全局组件在实例里的任何地方都可以使用

5.2コードで具体化された親子コンポーネントの構造

次の例のコードを見てください

Vueインスタンスは、最大の親コンポーネントcomponent1注册在实例上ですcomponent1就是Vue实例的子组件。

component2注册在component1组件上、それcomponent2就是component1组件的子组件。

<div id="app">
    <component1></component1>
</div>
<template id="component1">
    <div>
        <h2>我的第一个组件</h2>
        <component2></component2>
    </div>
</template>
<template id="component2">
    <div>
        <h2>我的第二个组件</h2>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    const component1 = {
        template: '#component1',
        components: {
            'component2': {
                template: "#component2"
            }
        }
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component1': component1
        }
    })
</script>

6、Vueコンポーネントデータ

6.1コンポーネントはVueインスタンスのデータに直接アクセスできますか？たとえば、{ {}}を直接使用します

答えはいいえだ。

コンポーネントは、単一の機能モジュール（小さなVueインスタンスに相当）のカプセル化です。つまり、このモジュールには、独自のHTMLテンプレートと独自の属性データデータがあります。
次のコードを見てみましょう。子コンポーネントで直接{ {mes}}を使用して、親コンポーネントのデータ属性mesの値を使用します。

<body>
<div id="app">
    <component1></component1>
</div>
<template id="component1">
    <div>
        <h2>{
   
   {mes}}</h2>
    </div>
</template>
</body>
<script src="./vue.js"></script>
<script>
    const component1 = {
        template: '#component1'
    }
    const app = new Vue({
        el: '#app',
        data:{
          mes: "实例数据"
        },
        components: {
            'component1': component1
        }
    })
</script>

[外部リンク画像の転送に失敗しました。ソースサイトにリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-2MDeB1Lb-1612834014933）（vue N​​ote 2_files / 3.jpg）]

6.2コンポーネントデータストレージ

コンポーネントオブジェクトにもデータ属性がdata属性必须是一个函数あり返回的对象ますが、このデータはオブジェクト内で保証されます

<body>
<div id="app">
    <component1></component1>
</div>
<template id="component1">
    <div>
        <h2>{
   
   {mes}}</h2>
    </div>
</template>
</body>
<script src="./vue.js"></script>
<script>
    const component1 = {
        template: '#component1',
        data(){
            return{mes: "实例数据"}
        },
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component1': component1
        }
    })
</script>

6.3 Vueコンポーネントのデータが機能するのはなぜですか？

为什么组件的data是一个函数公式ウェブサイトには次の一个组件的 data 选项必须是一个函数ように書かれています：したがって、各インスタンスは返されたオブジェクトの独立したコピーを維持できます

オブジェクトが作成されるとアドレスが割り当てられることは誰もが知っています。誰もがオブジェクトを使用すると、オブジェクトのプロパティ値が変更されます。アドレスは変更されますか？コンポーネントの使用を何度も繰り返す必要があることを思い出してください。はい、再利用すると、各コンポーネントのデータは個別に維持され、相互に影響を与えないと考えるでしょう。如果对象都是只是创建一次，那就会出问题了，现在有一个组件使用了两次，data内存地址都是一个，那一个组件修改了data，另一个组件的值也会跟着改变、これは私たちが見たい最後のものです。つまりdata是一个函数的话就不一样了，函数每次返回的对象都是一个新对象、各コンポーネントのオブジェクトが互いに影響を与えたくないようにするためです。

一文：就是为了保证每个组件的data对象都是相互独立

7、Vueコンポーネント通信-親コンポーネントはパラメーターを子コンポーネントに渡します

コンポーネントはVueインスタンスのデータを直接使用できないことを前に述べましたが、実際の開発プロセスでは、コンポーネントがVueインスタンスのデータを使用するのは正常です。

7.1コンポーネントは親コンポーネントのデータをどのように使用できますか？

通过 Prop 向子组件传递数据

7.2小道具の使用

1）props属性の値数组

定義

在组件对象里使用props属性，然后直接定义数组，数组的对应的值就是获取的传参的对象。

 const component1 = {
	template: "#component1",
	props: ['propsMessage','propsmessage1'],
}

使用する

コンポーネントを使用するとき、私がこれらの値を入れて良い配列を定義する限り、当成是组件的属性值あなたは直接传递参数アップすることができます。（v-bindを使用すると、親コンポーネントのデータデータを使用できます）

 <!-- 使用v-bind可以使用父组件的data数据 -->
 <component1 v-bind:props-message=message propsmessage1='参数1'></component1>

2）props属性の値はオブジェクトです

オブジェクトの目的：などの詳細オプションの構成を許可します类型检测、自定义验证和设置默认值。

オブジェクトの構文に基づいて、次のオプションを使用できます。

オブジェクト属性値 説明
タイプ 以下はネイティブコンストラクターである可能性がありますString、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。小道具が指定されたタイプであるかどうかをチェックします。そうでない場合、警告がスローされます。
デフォルト：任意 この小道具のデフォルト値を指定します。小道具が渡されない場合は、代わりにこの値を使用してください。对象或数组的默认值必须从一个工厂函数返回。
必須：ブール 小道具が必要かどうかを定義します。非実稼働環境では、この値が真実であり、小道具が渡されない場合、コンソール警告がスローされます。
バリデーター：機能 自定义验证函数会将该 prop 的值作为唯一的参数代入。非実稼働環境では、関数が偽の値を返す（つまり、検証が失敗する）と、コンソール警告がスローされます。

定義

グループの数と同様に、props属性はオブジェクトの最大レイヤーであり属性值是传递参数对象、渡されたパラメーターに対してさまざまなパーソナライズされた設定を行うことができます。

例：

<body>
<div id="app">
    <component1 v-bind:props-message=message height="哈哈" age= -1></component1>
    <!--如果不使用v-bind会识别不了data的数据-->
   <component1 props-message=message></component1>
</div>
<template id="component1">
    <div>
        <h2>{
   
   {propsMessage}}</h2>
        <h2>{
   
   {height}}</h2>
        <h2>{
   
   {age}}</h2>
    </div>
</template>
</body>
<script src="./vue.js"></script>
<script>
    const component1 = {
        template: "#component1",
        props: {
            // 检测类型
            propsMessage: String,
            height: String,
            // 检测类型 + 其他验证
            age: {
                type: Number,
                default: 0,
                required: true,
                validator: function (value) {
                    return value >= 0
                }
            }
        }
    }
    const app = new Vue({
        el: '#app',
        data: {
            message: "你好"
        },
        components: {
            'component1': component1
        }
    })
</script>

8.Vueコンポーネント通信-子コンポーネントから親コンポーネントへのカスタムイベント

1）子コンポーネントから親コンポーネントにデータを渡す方法

子コンポーネントが親コンポーネントにデータを渡すとき、それを使用し自定义事件て達成する必要があります

カスタムイベントの流れ：

  • サブコンポーネントで、$emitイベントをトリガーするために渡す

  • 親コンポーネントでv-on、子コンポーネントのイベントをリッスンする

<!--子组件-->
<template id="component1">
    <div>
        <button @click="but">子组件按钮触发父组件事件</button>
        <button @click="but1">子组件按钮触发父组件事件并带参数</button>
    </div>
</template>

子组件的对象定义（ 注意这个驼峰标识不能用，需要使用 kebab-case）

const component1 = {
        template: "#component1",
        methods: {
            but() {
                console.log("子组件按钮被触发了");
                //注意这个驼峰标识不能用，需要使用 kebab-case
                this.$emit('cpn-but');
            },
            but1() {
                console.log("子组件按钮并带参数被触发了");
                //注意这个驼峰标识不能用，需要使用 kebab-case
                //子组件按钮触发父组件事件并带参数，就在this.$emit加多一个参数对象
                this.$emit('cpn-but1', 'hhhh');
            }
        }
    }

2）親コンポーネントの定義

親コンポーネントが子コンポーネントを使用する場合、v-on命令が使用され、属性値は子コンポーネントによって定義されたthis。$ emit（ 'cpn-but'）の名前です。

<!--父组件-->
<div id="app">
    <component1 @cpn-but="cpnBut" @cpn-but1="cpnBut1"></component1>
</div>

次に、子コンポーネントのトリガーを受け入れることができる親コンポーネントのメソッドにトリガーメソッドを記述します

const app = new Vue({
        el: '#app',
        data: {
            message: "你好"
        },
        components: {
            'component1': component1
        },
        methods: {
            cpnBut() {
                console.log("父组件的方法被触发了");
            },
            cpnBut1(val) {
                console.log("父组件事件并带参数被触发了");
                console.log("参数:" + val);
            }
        }
    })

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<!--父组件-->
<div id="app">
    <component1 @cpn-but="cpnBut" @cpn-but1="cpnBut1"></component1>
</div>

<!--子组件-->
<template id="component1">
    <div>
        <button @click="but">子组件按钮触发父组件事件</button>
        <button @click="but1">子组件按钮触发父组件事件并带参数</button>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    const component1 = {
        template: "#component1",
        methods: {
            but() {
                console.log("子组件按钮被触发了");
                //注意这个驼峰标识不能用，需要使用 kebab-case
                this.$emit('cpn-but');
            },
            but1() {
                console.log("子组件按钮触并带参数被触发了");
                //注意这个驼峰标识不能用，需要使用 kebab-case
                //子组件按钮触发父组件事件并带参数，就在this.$emit加多一个参数对象
                this.$emit('cpn-but1', 'hhhh');
            }
        }
    }

    const app = new Vue({
        el: '#app',
        data: {
            message: "你好"
        },
        components: {
            'component1': component1
        },
        methods: {
            cpnBut() {
                console.log("父组件的方法被触发了");
            },
            cpnBut1(val) {
                console.log("父组件事件并带参数被触发了");
                console.log("参数:" + val);
            }
        }
    })

</script>
</html>

参照：https：//blog.csdn.net/qq_30442207/article/details/108813033

おすすめ

転載: blog.csdn.net/weixin_44433499/article/details/113766202
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com