目次
1. グローバル コンポーネントを作成する
1. 最初に足場を構築して実行し、構築が成功するようにします。
2. 2 つの vue ファイルを作成します。CompreHensive.vue ファイルはグローバル変数の作成に使用され、OneSided.vue はローカル変数として使用されます (キャメル ケースの使用に特に注意してください。そうしないと、エラーが報告されやすくなります)。
3. グローバル変数を作成する前に、main.js でグローバル変数を構成および構成します。コンポーネントをグローバルに登録するときは、変数名を - で区切るか、キャメル ケースの命名法を使用する必要があります。
4. CompreHensive.vue ファイルを再度作成し、テンプレートに html コンテンツを記述し、スクリプトに js コンテンツを記述し、スタイルに css スタイルに感謝し、js の命名時にハンプ命名を使用します。
5. App.vue 親クラスで使用します。
6.実行...
複数の vue インスタンスで使用できるグローバル コンポーネントは、グローバル変数に似ています。
2. ローカル コンポーネントを作成する
1. グローバル コンポーネントの最初の 2 つの手順と同様に、コンポーネントを App.vue に登録して使用します。
2. すべてのローカル コンポーネントが登録され、親クラスで使用されます。
3.実行...
ローカル コンポーネントは、現在の Vue インスタンスによってマウントされたオブジェクトでのみ使用でき、ローカル変数と同様に、ブロック レベルのスコープを持ちます。
3. 親コンポーネントがメソッドを子コンポーネントに渡す
1. 親クラス
<template>
<div id="app">
<my-pan :msg="msg" :arr="arr" :obj="obj" :hander="hander"></my-pan>
//字符串 //数组 //对象 //函数
</div>
</template>
<script>
import MyPan from "@/components/OneSided.vue";
export default {
name: "App",
data() {
return {
msg: "父组件向子组件传递方法",
arr: [2, 4, 6, 8],
obj: {
name: "张三",
age: 18,
sex: "男",
},
};
},
components: {
MyPan,
},
methods: {
hander(){
console.log('被点击');
}
},
};
</script>
<style>
</style>2. サブクラス
<template>
<div>
<h2>{
{ msg }}</h2>
<h2>{
{ arr }}</h2>
<h2>{
{ obj }}</h2>
<button @click="hand">点击</button>
</div>
</template>
<script>
export default {
name: "MyCpn",
props: {
msg: {
type: String, //字符串
},
arr: {
type: Array, //数组
},
obj: {
type: Object, //对象
},
hander: {
type: Function, //函数
},
},
methods: {
hand() {
this.hander();
},
},
// props:['msg'],
};
</script>
<style scoped>
h2 {
color: red;
}
</style>