vue组件传值总结

1.父组件向子组件传值 props

props属性传值 相当于一个组件里面的一个选项 用来指明通过哪些属性来传值可以是数组也可以是对象
传值形式：
1.可以写成props[‘name’,‘age’]，以数组的形式传值
2.props:{
// 键名：传递的属性名
propA:Number,
// 多种类型
propB:[Number,String],
// 必须类型
propC:{
type:Boolean,
required:true
},
propD:{
type:Number,
// 默认值
default:1000
}
},
3. 把所有要传的内容放到一个对象里面
props:{
pdata: {
type: Object,
default: function () {
return {
user: {},
parentFun:null,
}
}
},
},
声明允许你通过属性的方法传递数据
允许你传递多个属性
prop里面的东西不能改变

父组件

//父组件
<!-- 组件的模板 -->
<template>
    <div class="car">
        <h1>父组件</h1>
        <back-header :pdata="{user:user,parentFun:parentFun}"></back-header>
    </div>
</template>

<!-- 组件的模型 -->
<script>
import share from './share'
export default {
    mixins:[share],
    data () {
        return {
            user:{
                name:'leiqiu',
                age:18
            }
        }
    },
    methods:{
        parentFun(that){
            // 这里写要执行的方法
            console.log('子组件调用父组件方法');
            console.log(that.ceshi);
            // 如果要用到子组件的this，这里面需要传个参数比如that,这个参数，在子组件调用的时候会把子组件的this传进来
        }
    }
}
</script>

这里我在子组件的props里面声明了一个对象pdata，把所有想传的变量和方法都写在里面，这样传值的时候看起来比较规整，不会那么乱，当然也可以不声明这个对象，直接把需要传的值写在pdata里面，注意格式尽量写成
name：
{
type:String,
default:""
}
类似这种，给个属性名，和默认值。

子组件

//子组件
<!-- 组件的模板 -->
<template>
    <div>
        <h1>(子组件)用户信息：</h1>
        <p>用户名：{{pdata.user.name}}</p>
        <p>年龄：{{pdata.user.age}}</p>
        <p>（子组件修改父组件变量）修改后的数据：</p>
        <p>用户名：{{childrenUser.name}}</p>
    </div>
</template>

<!-- 组件的模型 -->
<script>
export default {
    props:{
      pdata: {
            type: Object,
            default: function () {
              return {
                user: {},
                parentFun:null,
              }
            }
          },
    },
    data () {
        return {
            ceshi:'123456',
            childrenUser:{}
        }
    },
    mounted(){
        this.pdata.parentFun(this);

        //子组件不能直接修改父元素，如果想要修改父组件的数据，需要先把父组件的数据给子组件的一个变量
        // 在data里面声明一个变量，例如childrenUser，这里把父元素的user赋给childrenUser，然后修改childrenUser，
        // 不过要注意的是，修改这个变量，并不会影响到父组件的user
        this.childrenUser = this.pdata.user;
    }
}
</script>

<!-- 组件的样式 -->
<style scoped>

</style>

关于子组件修改父组件值：
子组件不能直接修改父元素，如果想要修改父组件的数据，需要先把父组件的数据给子组件的一个变量
在data里面声明一个变量，例如childrenUser，这里把父元素的user赋给childrenUser，然后修改childrenUser，不过要注意的是，修改这个变量，并不会影响到父组件的user，也就是说，props里面的值其实并没有被修改到

子组件传值给父组件 this.$emit

图为初始数据，点击按钮“添加人数”，人数会加1
子组件中：通过this.$emit传值
父组件中：通过 @传值名 接收值

代码奉上：
父组件

<!-- 组件的模板 -->
<template>
    <div class="parent">
        <h1>父组件</h1>
        父组件人数:{{childrenCount}}
        <p>--------------------------</p>
        <children-mode @childrenCount="getChildrenCount"></children-mode>
    </div>
</template>

<!-- 组件的模型 -->
<script>
import share from './share'
export default {
    mixins:[share],
    data () {
        return {
            childrenCount:0,
        }
    },
    methods:{
        getChildrenCount(val){
            this.childrenCount = val;
        }
    },
}
</script>

<!-- 组件的样式 -->
<style scoped>

</style>

父组件中的： <children-mode @childrenCount=“getChildrenCount”>
@后面跟传的变量名，然后里面的方法名随便起，主要是用来获取值，这样就可以实时获取参数的变化

子组件

<!-- 组件的模板 -->
<template>
    <div class="children">
        子组件
        <button @click="add">添加人数</button>
    </div>
</template>

<!-- 组件的模型 -->
<script>
export default {
    data () {
        return {
            count:10,
        }
    },
    methods:{
        add(){
            this.count +=1;
            this.$emit('childrenCount',this.count)
        }
    },
    mounted(){
        this.$emit('childrenCount',this.count)
    }
}
</script>

<!-- 组件的样式 -->
<style scoped>

</style>

总结：1.外部往内部传值 是通过属性 ；2.内部往外部传值 是通过$emit 向上发射

非父子组件传值 Bus

非父子组件传值 使用中央总线来传，创建一个Vue作为中央总线处理
bus.$on可监听事件
这里我们写一个中央总线Bus.js文件，然后在需要传值和接收值的文件引入Bus就可以了
Bus.js

//Bus.js
import Vue from "vue";
export default new Vue();

A组件
（1）先引入Bus.js
（2）在需要传值的地方写上Bus.$emit(‘name’,数据)

B组件
（1）先引入Bus.js
（2）在需要接收的地方写上Bus.$on(‘name’,(val)=>{ val就是传过来的值 })