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

一、组件传值的三种情况

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

父级向子级传递数据
子级向父级传递数据
非父子级传递数据

二、父级向子级传值

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

 1 <!-- 父级 -->2 <template>3     <div>4         <Child :msg="message"></Child>5     </div>6 </template>7 8 <script>9 import Child from "./components/Child.vue";
10 export default {
11     // 注册组件
12     components:{Child},
13     data(){
14         return {
15             message:"hello child"
16         }
17     }
18 }
19 </script>
20
21 <!-- 子级 -->
22 <template>
23     <h1>{{msg}}</h1>
24 </template>
25
26 <script>
27 export default {
28     props:["msg"]
29 }
30 </script>

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

三、子级向父级传值

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

 1 <!-- 子级组件 -->2 <template>3     <button @click="sendData">sendData</button>4 </template>5 6 <script>7 export default {8     data(){9         return {
10             message:"hello father"
11         }
12     },
13     methods:{
14         sendData(){
15             this.$emit("sendData",this.message);
16         }
17     }
18 }
19 </script>

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

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

 1 <!-- 父级组件 -->2 <template>3     <div>4         <h1>子级的数据为：{{message}}</h1>5         <Child @sendData="sd"></Child>6     </div>7 </template>8 9 <script>
10 import Child from "./components/Child.vue";
11 export default {
12     // 注册组件
13     components: { Child },
14     data() {
15         return {
16             message: ""
17         };
18     },
19     methods: {
20         sd(childData) {
21             this.message = childData;
22         }
23     }
24 };
25 </script>

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

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

 1 //store.js2 export default {3     state:{4         message:"hello vue"5     },6     setStateMessage(str){7         this.state.message = str;8     }9 }
10
11 <!-- sister组件 -->
12 <template>
13     <h1>{{state.message}}</h1>
14 </template>
15
16 <script>
17 import store from "../store.js"
18 export default {
19     data(){
20         return {
21             title:"sister组件",
22             state:store.state
23         }
24     }
25 }
26 </script>
27
28 <!-- brother组件 -->
29 <template>
30     <div>
31         <button @click="changeData">change data</button>
32     </div>
33 </template>
34
35 <script>
36 import store from "../store.js"
37 export default {
38     methods:{
39         changeData(){
40             store.setStateMessage("122");
41             console.log(store.state.message)
42         }
43     }
44 }
45 </script>

五、课后练习

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

carts组件：包括购物车商品，商品单价。
counter组件中的计数器组件，设置数量可以改变总价。
control包括一个重置按钮可以数量清零。

组件层级结构

├─App.vue
│    ├─control
│    ├─carts
│    │   ├─counter

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

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

【融职培训】Web前端学习第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
【融职培训】Web前端学习第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
【融职培训】Web前端学习第11章微信开发4 JS-SDK接口
一.概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.例如我们网页中希望实现扫一扫.获取本地相册.位置信息.分享功能等,都可以使用JS-SDK来实现. 二.JS-SD ...
【融职培训】Web前端学习第2章网页重构1 第一个网页
一.内容概述从本节我们开始正式学习前端开发的课程内容,首先我们从第一个网页开始了解html和css的基本概念,并通过创建第一个网页了解vscode的基本使用方法. 二.安装vscode插件汉化插件 ...
【融职培训】Web前端学习第11章微信开发5 微信支付
一.概述如果需要实现微信支付功能,需要有一个已认证的微信服务号,并且开通微信支付,开通后微信会提供一个商户ID.有了这个ID才能成功调用微信支付接口. 开通微信支付后,需要在微信支付后台[产品中心] ...
【融职培训】Web前端学习第10章小程序开发4 小程序开发
一,数据绑定 VUE:vue动态绑定一个变量的变量元素的某个属性的时候,会在变量前面加上冒号:,例: <p:title="tit">我的title属性绑定了数据< ...

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

一、组件传值的三种情况

二、父级向子级传值

三、子级向父级传值

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

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

最新文章

热门文章

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

一、组件传值的三种情况

二、父级向子级传值

三、子级向父级传值

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

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

最新文章

热门文章

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

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