vue的组件传值

1、父组件向子组件传值

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
 
<template>
   <child :name="name"></child>
</template>
<script>
import child from "./child.vue"
  export default {
     components: {child},
     data(){
      return {name:"二哈"}
     }
  }
</script>









 

 

子组件：

1
2
3
4
5
6
7
8
 
<template>
  <div>{{name}}</div>
</template>
<script>
  export default {
    props:["name"]
  }
</script>
 





2、子组件向父组件传值

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<template>
  <child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
  export default {
    components: {child},
    methods:{
      reviceSondata(data){
        console.log(data);
      }
    }
  }
</script>

 

 

 

 

 

 

 

 

 

 

 

 

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<template>
   <button @click="dataTofather">点击</button>
</template>
<script>
  export default {
    data () {
      return {
        message: '啦啦啦啦'
      }
    },
    methods:{
      dataTofather(){
        this.$emit("childToParent",this.message,true);
      }
    }
  }
</script>
 


 







3、兄弟组件传值

可以借用公共父元素。子组件A  this.$emit("eventName", data) 触发事件，父组件监听事件，更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props（注意不是watch 子组件B自身data）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-tab-pane label="组织信息" name="second">
               <el-row :gutter="30">
                   <el-col :span="6">
                       <!-- 组织组件子组件A -->
                       <Organization  @callBackInfo="handleInfo"></Organization>
                   </el-col>
 
                   <el-col :span="18">
                       <!-- 部门领导信息子组件B -->
                       <LeaderHead :partInfo="infos" ></LeaderHead>
 
                       <!-- 人员信息 -->
                       <PersonTable></PersonTable>
                   </el-col>
               </el-row>
    </el-tab-pane>       

　　

1
2
3
4
5
6
7
8
9
10
// 父组件
methods: {
      handleClick(tab, event) {
        console.log("tab 切换");
      },
      handleInfo(data){
        console.log({prop:data})
        this.infos = data
      },
}

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 子组件A
methods:{
        getOrganizationTree(){
            this.$axios.get(
                "/api/dingtalk/getDeptTree",
                { headers: { "Content-Type": "application/x-www-form-urlencoded" }    
             }
            )
            .then( res => {
                var result = res.data;
                if (result.success) {
                    console.log(result.data)
                    this.treeData = [result.data]
                    let partInfo = [
                        {name:"管理员:", value:"熊涛"},
                        {name:"会话ID:", value:"dafasdfadsfasdf"},
                        {name:"部门所有者:", value:"熊涛1000"}
                    ]
                    this.$emit("callBackInfo", partInfo)
                    console.log(50050)
                } else {
                    alert(result.message)
                }
            })
        },
}

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 子组件B
<script>
export default {
    name:"LeaderHead",
    props:["partInfo"],
    data(){
        return {
            infos:this.partInfo
        }
    },
    watch:{
        partInfo(){
            console.log({PART:this.partInfo})
            this.infos = this.partInfo;
        }
    },
    mounted(){
        this.infos = this.partInfo;
    }
}
</script>
posted @ 2019-12-02 23:47  singGirl  阅读(194)  评论(1)  编辑  收藏  举报