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.js
2 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原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录