VUE父子组件传输—— props/$emit和project / inject
props/$emit
props:父组件向子组件传输,$emit:子组件向父组件传输
- props只能是父组件向子组件进行传值,props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
- props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。
父组件:practice.vue
<template>
<div>
<ul>
<li v-for="framework in sortedFrameworks" :class="framework.language">
<!-- 动态渲染li列表,通过v-for=" in "结构 获取 各个列表 -->
<!-- 动态获取class名,:class="framework.language" -->
{{ framework.name }}
</li>
</ul>
<practice-add
:frameworks="frameworks"
:languages="languages"
@framework-added="addFramework"
></practice-add>
<!-- 父组件在调用子组件时,定义:frameworks="frameworks" :languages="languages" 这样的代码,通过这个的代码可以将属性数据传递子组件;
而子组件通过 props 声明:props: ['frameworks', 'languages'], 用来接收父组件传递过来的属性数据 -->
</div>
</template>
<script>
import practiceAdd from "./components/practiceAdd";
export default {
name: "practice",
components: { practiceAdd },
data() {
return {
frameworks: [
{ name: "Mate30Pro", language: "huawei" },
{ name: "xiaomi11", language: "xiaomi" },
{ name: "oppo reno5", language: "oppo" },
{ name: "X60", language: "vivo" },
],
languages: ["huawei", "xiaomi", "oppo", "vivo"],
};
},
computed: {
sortedFrameworks() {//这个方法是用来排序列表的
return this.frameworks.sort((a, b) => {
if (a.language < b.language) {
return -1;
} else if (a.language > b.language) {
return 1;
} else {
return 0;
}
});
},
},
methods: {
addFramework(framework, language) {
this.frameworks.push({ name: framework, language: language });
},
},
};
</script>
<style scope>
.huawei { color: cornflowerblue;}
.xiaomi { color: gold;}
.oppo { color: aqua;}
.vivo { color: darkgreen;}
</style>
子组件 practiceAdd.vue
<template>
<div>
框架:<input v-model="newFramework" name="framework" /> 语言:
<select v-model="newLanguage">
<option v-for="language in languages" v-text="language"></option>
</select>
<button @click="addNewFramework">新增框架</button>
<!-- 当点击按钮时,会触发点击事件addNewFramework,这样能通过this.$emit('framework-added', this.newFramework, this.newLanguage);这行代码传递给父组件
父组件那边作用域定义的@framework-added="addFramework" 来监听事件处理 -->
</div>
</template>
<script>
export default {
name: "practiceAdd",
props: ["frameworks", "languages"],
data: function () {
return {
newFramework: "",
newLanguage: "",
};
},
methods: {
addNewFramework() {
let exists = this.frameworks.find(
(framework) => framework.name == this.newFramework
);
if (exists) {
alert("该框架已存在!");
return;
}
this.$emit("framework-added", this.newFramework, this.newLanguage);
},
},
};
</script>
依赖注入(project / inject)
provide-inject组件依赖注入,可以用在父子组件传输,但不局限于父子,也可以是祖孙之间或是更嵌套的组件之中, 但需要注意的是:这种传输是非响应式的
project / inject是Vue提供的两个钩子,和data、methods是同级的,且project的书写形式和data一样。
project 钩子用来发送数据或方法。inject钩子用来接收数据或方法
在上层组件中,通过provide传递参数,底层组件通过inject接收,格式为:inject: [“app”, “num”],
父组件 otherIndex.vue
<template>
<div class="provide">
<div>{{ msg }}</div>
<p>{{ phone }}</p>
<p>{{ num }}</p>
<other class="inject"></other>
</div></template>
<script>
import other from "./components/other";
export default {
name: "otherIndex",
components: { other},
provide() {
return {
app: this,
num: this.num,
};
},
data() {
return {
msg: "hello",
phone: "eazin",
num: "19940420",
};
},
};
</script>
<style scope>
.provide,
.inject {
background-color: cadetblue;
color: crimson;
font-size: 18px;
}
</style>
子组件other.vue
<template>
<div>
<div>{{ msg }}--{{ phone }}</div>
<p>{{ numaa }}</p>
</div>
</template>
<script>
export default {
name: "other",
inject: ["app", "num"],
data() {
return {
msg: " ",
phone: " ",
numaa: "11",
};
},
created: function () {
this.getData();
},
methods: {
getData() {
this.msg = this.app.msg;
this.phone = this.app.phone;
this.numaa = this.num;
},
},
};
</script>
以 app: this, 这种形式传递到底层组件中,那底层组件可以访问父组件的所有的数据,格式为 this.app.
若上层组件是普通单数据传输 num: this.num, 底层组件也是用 this.num 来访问