Web前端学习第7章 Vue基础教程4 组件传值

学习猿地

发布于 2020-06-28 11:00:53

2080

发布于 2020-06-28 11:00:53

文章被收录于专栏：学习猿地学习猿地

一、组件传值的三种情况

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

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

二、父级向子级传值

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

 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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-06-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

components