vue组件（component）之前的通信（传值）

父传子：(即在子组件中访问父组件中的数据)

1.在父组件中使用子组件时，添加自定义属性，属性值为传输的内容
2.在子组件中，使用props:['msg']接收父组件中传递的属性
     props:['msg'],//当前子组件希望从父组件中接收的属性
      						 多个属性使用逗号分隔

注： props声明在和data,methods同级位置

话不多说，上图
代码案例：
子组件：

<template>
    <div>
        <h2>child子组件</h2>
        <p>{{msg}}</p>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:"仙女",
            age:18
        }
    },
    props:[
        "msg",
    ]
}

父组件：

<template>
  <div id="app">
    <!-- 可以绑定一个值 -->
    <!-- <child msg="helloWorld"></child> -->    
    <!-- 也可以绑定一个变量 -->
    <child :msg="hello" ></child> 
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  data () {
    return {
      hello:"这事hello的hello"
    }
  },
  components: { // 注册组件
    child,
  }
}
</script>

子传父:(即在父组件中访问子组件中的数据)

1.在子组件中的一个标签上绑定一个事件，在事件处理函数中通过$emit来触发父级的自定义事件
  $emit('name',data,data1);   //name为触发的自定义函数名称，data,data1为传送的数据
2.在父组件中绑定上面的自定义函数
@name="handler",handler的参数为上面传过来的值，即data1,data2
    在自定义事件的事件处理程序中，参数为传递的值
    

代码案例：
子组件：

<template>
    <div>
        <el-button @click="handler" >点击</el-button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            name:"仙女",
            age:18
        }
    },
    methods:{
        handler(){
            this.$emit('parenthandler',this.name,this.age)
        }
    },
}
</script>

父组件：

<template>
  <div id="app">
    <child  @parenthandler="resultHandler"></child>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  data () {
    return {
    }
  },
  methods:{
    resultHandler(data1,data2){
      console.log(data1,data2)
    }
  },
  components: { // 注册组件
    child,
  }
}
</script>

父组件和子组件通过触发事件传值（类似于表单验证中的用法）
1.在父组件中使用子组件时，添加ref=“msg”

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane :label="item" :name="item" v-for="item in nameList" :key='item'>
        <orderTable ref='msg'></orderTable>
    </el-tab-pane>
</el-tabs>

methods: {
   handleClick(tab, event) {
       // console.log(tab.index);
        this.$refs.msg[tab.index].sendItem(this.activeName);
    }
}

3.在自组件中的methods声明一个

methods:{
    sendItem(name){
        //alert(name);->status
        if(name=='所有订单'){
            var data={
                page:1,
                pageSize:10
            }
        }else{
            var data={
                page:1,
                pageSize:10,
                status:name
            }
        }
        
        this.$axios.post("/order/queryPage",qs.stringify(data)).then(response=>{
            console.log(response);
            this.orders=response.data.data.list;
        });
    }
 }

兄弟通信：

在这里插入代码片