【融职培训】Web前端学习第7章 Vue基础教程4 组件传值

一、组件传值的三种情况

我们可以把组件之间的数据传递分为三种情况：

父级向子级传递数据

子级向父级传递数据

非父子级传递数据

二、父级向子级传值

父级可以通过属性向自己传递数据，示例代码如下所示：

1 2 3

4 5

6 7 8 9import Child from "./components/Child.vue";10exportdefault {11// 注册组件12 components:{Child},13 data(){14return {15message:"hello child"16 }17 }18}1920212223

24252627exportdefault {28props:["msg"]29}30

1.创建子组件，在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props，然后创建一个名为message的属性

三、子级向父级传值

子级想父级传递数据需要用自定义事件。

1 2 3sendData 4 5 6 7exportdefault { 8 data(){ 9return {10message:"hello father"11 }12 },13 methods:{14 sendData(){15this.$emit("sendData",this.message);16 }17 }18}19

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

1 2 3

子级的数据为：{{message}}

5 6

7 8 910import Child from "./components/Child.vue";11exportdefault {12// 注册组件13 components: { Child },14 data() {15return {16message: ""17 };18 },19 methods: {20 sd(childData) {21this.message = childData;22 }23 }24};25

四、非父子级组件传值组件传值

在src目录中创建一个store.js文件用来统一存储数据

1//store.js 2exportdefault { 3 state:{ 4message:"hello vue" 5 }, 6 setStateMessage(str){ 7this.state.message = str; 8 } 9}10111213

14151617import store from "../store.js"18exportdefault {19 data(){20return {21title:"sister组件",22 state:store.state23 }24 }25}2627282930

31change data32

33343536import store from "../store.js"37exportdefault {38 methods:{39 changeData(){40store.setStateMessage("122");41 console.log(store.state.message)42 }43 }44}45

五、课后练习

使用组件化开发完成一个购物车功能，需求如下所述：

carts组件：包括购物车商品，商品单价。

counter组件中的计数器组件，设置数量可以改变总价。

control包括一个重置按钮可以数量清零。

组件层级结构

├─App.vue

│ ├─control

│ ├─carts

│ │ ├─counter

【融职教育】在工作中学习，在学习中工作

【融职培训】Web前端学习第7章 Vue基础教程4 组件传值

【融职培训】Web前端学习第7章 Vue基础教程4 组件传值

{{msg}}

子级的数据为：{{message}}

{{state.message}}

【融职培训】Web前端学习 第7章 Vue基础教程4 组件传值

{{msg}}

子级的数据为：{{message}}

{{state.message}}

【融职培训】Web前端学习第7章 Vue基础教程4 组件传值