vue组件传值

Mr.wang

发布于：2019年6月15日

vue组件的Props校验，传递

Props 校验

默认值

Vue.component('my-component', {
    // 带有默认值的对象
    propA: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { name: 'wang' }
      }
    }
})
Vue.component('my-component', {
    // 带有默认值的对象
    propA: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default:()=>{ name: 'wang' }
    }
})

自定义校验

Vue.component('my-component', {
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
})

type类型校验

可以设置为String Number Boolean Array Object Date Function Symbol

亦可设置多个 [‘String ‘,’Number ‘]

1父传子

通过父组件定义动态绑定一个数据来给子组件传递数据，子组件通过props来接受数据

1	:data="data" =>> props:{data} >>>>直接在template中使用data

属性透析

v-bind=”$props”: 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。

v-bind=”$attrs”: 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。

<template>
  <div>
    <el-button v-bind="$attrs">确定</el-button>
  <div>
</template>
 
// 父组件使用->其身上的属性都传递给子组件
<my-button type='primary' size='mini'/>

在$attrs里面只会有props没有注册的属性

.v-on=”将父组件标签上的自定义事件向下传递其子组件可以直接通过emit(eventName)的方式调用。

　　vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

<top>
  <center
      name="name"
      age="18"
      gender="666"
      sdf="asd"
      @isClick="isClick"
      @asd="asd"
  >
    <bottom
      v-bind="$attrs"
      v-on="$listeners"
    >
    </bottom>
  </center>
</parent>
//top.vue
<script>
  import centers from '~/components/center';
  export default {
    components: {
      centers
    },
    methods: {
      asd() {
        console.log(999);
      },
      isClick() {
        //可以监听到子组件center内的bottom组件emit事件
        console.log(666);
      }
    }
  };
</script>
//center.vue
<script>
  import bottom from '~/components/bottom';
  export default {
    components: {
      bottom
    },
    props: {
      name: {
        type: String,
        default: 'default'
      },
      age: {
        type: String,
        default: 'default'
      }
    }
  };
</script>
//bottom.vue
<script>
  export default {
    props: {
      gender: {
        type: String,
        default: ''
      }
    },
    mounted() {
      console.log(this.$attrs);
      console.log(this.$listeners);
      this.$listeners.isClick();
      this.$listeners.asd();
      //子组件emit事件
      this.$emit('isClick')
    }
  };
</script>

具体例子

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <father></father>
    </div>
    <template id='father'>
        <div class="father">
            <p>我是父组件{{fname}}</p>
            <p>我要告诉我儿子其实他是{{type}}</p>
            <son :mytype="type"></son>
        </div>
    </template>
    <template id='son'>
        <div class="son">
            <p>我是子组件{{sname}}</p>
            <p>我的老爸告诉我我其实是{{mytype}}</p>
        </div>
    </template>
    <script>
        // 创建父组件
        Vue.component('father', {
            template: '#father',
            data() {
                return {
                    fname:'老爸',
                    type:'穷二代'
                }
            },
            // 通过components来创建子组件,可以创建多个
            components: {
                'son': {
                    template: '#son',
                    props:['mytype'],
                    data() {
                        return {
                            sname:'小明',
                            // mytype:'??'
                        }
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

2子传父

通过子组件发射（$emit）数据父组件接受数据

1	this.$emit(事件名称,你想传递的数据) =>>父组件监听这个事件（@/v-on） @事件名称=“方法（参数）” =>>这个方法默认参数就是传递的数据

具体例子

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <father> </father>
   </div>
    <template id='father'>
        <div class="father" style='border:solid 1px'>
            <p>我是父组件{{fname}}</p>
            <p>我的儿子告诉我他的女朋友的名字叫{{erxifu}}</p>
            <!-- <son v-on:getname='ok'></son> -->
            <son @getname='ok'></son>
        </div>
    </template>
    <template id='son'>
        <div class="son">
            <p>我是子组件{{sname}}</p>
            <button @click='tellname'>点击告诉我老爸我的女朋友叫{{mygfname}}</button>
        </div>
    </template>
    <script>
        // 创建父组件
        Vue.component('father', {
            template: '#father',
            data() {
                return {
                    fname:'老爸',
                    erxifu:'??'
                }
            },
            methods:{
                // 这个事件处理函数默认有一个参数,这个参数就是之前事件传递的数据
                ok(data){
                    console.log(data)
                    this.erxifu = data
                }
            },
            // 通过components来创建子组件,可以创建多个
            components: {
                'son': {
                    template: '#son',
                    data() {
                        return {
                            sname:'小明',
                            mygfname:'小红'
                        }
                    },
                    methods:{
                        tellname(){
                            // 发射一个事件
                            // this.$emit(事件名称,你想传递的数据)
                            // 数据可以是任意数据
                            this.$emit('getname',this.mygfname)
                        }
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            },
            mounted(){
            }
        })
    </script>
</body>

</html

3子传子

通过事件总线传值，子组件通过事件总线对象发射数据，父组件接受数据

1
2
3

var bus = new Vue() = "创建vue事件总线" =>> 子组件通过bus.$emit(事件名称,你想传递的数据) ==>>兄弟组件通过bus.$on(事件名称,(传递过来的数据)=>{
  处理逻辑
})

具体例子

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <father>  </father>
    </div>
    <template id='father'>
        <div class="father" style='border:solid 1px'>
            <p>我是父组件{{fname}}</p>
            <son></son>
            <dauther></dauther>
        </div>
    </template>
    <template id='son'>
        <div class="son">
            <p>我是儿子组件{{sname}}</p>
            <p>我的妹妹回来了,跟我说她的男朋友叫:{{meifu}}</p>
        </div>
    </template>
    <template id='dauther'>
        <div class="dauther">
            <p>我是女儿组件{{dname}}</p>
            <button @click='tellname'>点击向我哥哥炫耀我的男朋友的名字叫{{mybfname}}</button>
        </div>
    </template>
    <script>
        // 创建一个事件总线
        var bus = new Vue()

        // 创建父组件
        Vue.component('father', {
            template: '#father',
            data() {
                return {
                    fname: '老爸'
                }
            },
            // 通过components来创建子组件,可以创建多个
            components: {
                'son': {
                    template: '#son',
                    data() {
                        return {
                            sname: '小明',
                            meifu:'??'
                        }
                    },
                    // 在mounTed钩子函数中进行事件的监听
                    mounted(){
                        // 通过事件总线的$on进行事件的监听
                        // 事件处理函数默认有一个参数,就是传递的数据
                        bus.$on('getname',(data) =>　{
                            console.log(data) 
                            this.meifu = data
                        })
                    }
                },
                'dauther': {
                    template: '#dauther',
                    data() {
                        return {
                            dname: '小红',
                            mybfname:'狗蛋'
                        }
                    },
                    methods:{
                        // 通过事件总线发射一个事件
                        tellname(){
                            bus.$emit('getname',this.mybfname)
                        }
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            },
            mounted() {
            }
        })
    </script>
</body>
</html>