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>