1、父傳子（ 定義：父傳子使用的是 props ） ① 首先確定父組件和子組件，然後在父組件中引入子組件，註冊並使用； 父組件代碼如下： <template> <div> <h1>父組件</h1> <!-- 使用子組件 --> <ChildView></ChildView> </div> </tem ...
1、父傳子（ 定義：父傳子使用的是 props ）
① 首先確定父組件和子組件，然後在父組件中引入子組件，註冊並使用；
父組件代碼如下：
<template>
<div>
<h1>父組件</h1>
<!-- 使用子組件 -->
<ChildView></ChildView>
</div>
</template>
<script>
// 引入子組件
import ChildView from "../components/child/child1.vue";
export default {
name: "FatherView",
components: {
// 註冊子組件
ChildView,
}
};
</script>
子組件代碼如下：
<template>
<div>
<h1>子組件</h1>
</div>
</template>
<script>
export default {
name: "ChildView",
components: {},
};
</script>
② 然後在父組件的data裡面定義需要傳遞給子組件的數據以及methods裡面的自定義事件；
//傳遞的數據 data() { return { list: [1, 2, 3, 4, 5], title: "wanjie", age: 22, sex: 1, }; }, methods: { // 自定義事件 myHander(v) { console.log("myHander", v); }, },
③ 通過給子組件標簽上自定義數據和事件進行輸送；
<!-- props綁定的屬性和事件 -->
<ChildView
:title="title"
:list="list"
:age="age"
:sex="sex"
@myHander="myHander"
></ChildView>
④ 子組件接受數據需要在script中定義一個與data平級的props，在props數組的內部來進行接收；
//聲明props //這裡的兩個值需要和父組件傳過來的值相同，否則就會報錯 props: ["title", "list"], data() { return {}; },
⑤ 子組件在頁面上顯示，直接this.屬性名就可以獲取到；
<p>{{ this.title }}</p>
⑥ 如果沒有在子組件的props裡面聲明接收，可以使用 $attrs 獲取到傳遞的數據、$listeners 獲取自定義事件；
console.log("child", this.list); //輸出結果為：child [1, 2, 3, 4, 5]
console.log("其他沒有聲明的props在:", this.$attrs); //輸出結果為：其他沒有聲明的props在: {age: 22, sex: 1}
console.log("沒有使用的事件：event", this.$listeners); //輸出結果為：沒有使用的事件：event {myHander: ƒ}
完整父組件代碼如下：
<template>
<div>
<h1>父組件</h1>
<!-- 使用子組件 -->
<!-- props綁定的屬性和事件 -->
<ChildView
:title="title"
:list="list"
:age="age"
:sex="sex"
@myHander="myHander"
></ChildView>
</div>
</template>
<script>
// 引入子組件
import ChildView from "../components/child/child1.vue";
export default {
name: "FatherView",
components: {
// 註冊子組件
ChildView,
},
mixins: [],
props: {},
data() {
return {
list: [1, 2, 3, 4, 5],
title: "wanjie",
age: 22,
sex: 1,
};
},
methods: {
// 自定義事件
myHander(v) {
console.log("myHander", v);
},
},
};
</script>
完整子組件代碼如下：
<template>
<div>
<h1>子組件</h1>
<p>{{ this.title }}</p>
<button type="button" @click="fn">父傳子</button>
</div>
</template>
<script>
export default {
name: "ChildView",
components: {
},
mixins: [],
//聲明props
//這裡的兩個值需要和父組件傳過來的值相同，否則就會報錯
props: ["title", "list"],
data() {
return {};
},
mounted() {
// 列印測試
console.log("child", this.title); //child wanjie
console.log("child", this.list); //child [1, 2, 3, 4, 5]
console.log("其他沒有聲明的props在:", this.$attrs); //其他沒有聲明的props在: {age: 22, sex: 1}
console.log("沒有使用的事件：event", this.$listeners); //沒有使用的事件：event {myHander: ƒ}
},
methods: {
fn() {
this.$emit("myHander", 123);
},
},
};
</script>
2、子傳父（ 定義：父傳子使用的是 emit ）
① 首先確定父組件和子組件，然後在父組件中引入子組件，註冊並使用；
② 然後在子組件的data裡面定義需要傳遞給父組件的數據以及methods裡面的自定義事件；
③ 在子組件裡面定義一個方法傳值 $emit ("第一個參數為自定義方法名"，第二個參數為需要傳遞的值)；
methods: { fn() { this.$emit("pass", this.name); }, },
父組件代碼如下：
<template>
<div>
<h1>父組件</h1>
<!-- 使用子組件 -->
<AboutList></AboutList>
</div>
</template>
<script>
// 引入子組件
import AboutList from "../components/children/AboutList";
export default {
name: "AboutView",
// 註冊引入的子組件
components: {
AboutList,
},
data() {
return {};
},
methods: {},
};
</script>
子組件代碼如下：
<template>
<div>
<h2>子組件</h2>
<button type="button" @click="fn">子傳父</button>
</div>
</template>
<script>
export default {
name: "AboutList",
components: {},
data() {
return {
// 傳遞給父組件的值
list: [1, 2, 3, 4, 5],
name: "wj",
sex: 12,
};
},
methods: {
// 自定義事件
fn() {
this.$emit("pass", this.name);
},
},
};
</script>
④ 在父組件定義一個自定義事件接收子組件傳遞過來的事件、data裡面定義一個來接收數據；
data() { return { dataList: [], }; }, methods: { getList(val) { this.dataList = val; console.log("子組件傳遞迴來的數據", this.dataList); }, },
註意：自定義事件的等於號前面@pass需和子組件自定義方法名一樣；等於號後面為父組件自定義方法名，需和下方的方法名對應。
子組件代碼：
methods: { fn() { this.$emit("pass", this.name); }, },
父組件代碼：
<AboutList @pass="getList"></AboutList> // 接收自定義事件 methods: { getList(val) { this.dataList = val; console.log("子組件傳遞迴來的數據", this.dataList); }, },
完整的父組件代碼如下：
<template>
<div>
<h1>父組件</h1>
<!-- 使用子組件 -->
<AboutList @pass="getList"></AboutList>
<p>name:{{ dataList }}</p>
</div>
</template>
<script>
// 引入子組件
import AboutList from "../components/children/AboutList";
export default {
name: "AboutView",
// 註冊引入的子組件
components: {
AboutList,
},
data() {
return {
dataList: [],
};
},
methods: {
getList(val) {
this.dataList = val;
console.log("子組件傳遞迴來的數據", this.dataList); //輸出結果為：子組件傳遞迴來的數據 wj
},
},
};
</script>
完整的子組件代碼如下：
<template>
<div>
<h2>子組件</h2>
<button type="button" @click="fn">子傳父</button>
</div>
</template>
<script>
export default {
name: "AboutList",
components: {},
data() {
return {
list: [1, 2, 3, 4, 5],
name: "wj",
sex: 12,
};
},
methods: {
fn() {
this.$emit("pass", this.name);
},
},
};
</script>
