2020-11-18

vue父子传值

前言

vue 中我们需要去封装组件让自己的代码更加简洁、方便、便捷。这样就会存在传值的问题如果父向子传值和子向父传值怎么传，怎么封装个组件和elementUi的组件一样可以像input一样v-model或者:value就能取到内容的值呢，还有Vue .sync修饰符与$emit(update:xxx)写法问题
、$attrs、$listeners的使用问题和props的用法介绍

父向子传值

父向子传值非常简单在父级引入的组件标签中写入:youName='value'要传的值的名字和他的值，在子组件中用props接收就行了

父级组件

<template>
  <div>
    // <!-- 为了直观展示显示个input可以动态改值 -->
    <input type="text" v-model="name">
    // <!-- 引入子组件 -->
    <min :youName="name" />
  </div>
</template>
<script>
import min form './min';
export default {
    components: {
        min,
    },
    data () {
      return {
          name:''
      }
    }
    // 接受父组件的值
  }
</script>

这下面是子级组件

子级组件

<template>
  <div>
    <!-- 这是我的子组件展示位置 -->
    {{youName}}
  </div>
</template>
<script>
export default {
    data () {
      return {}  //这个data里不能定义相同变量名字
    },
    props:[youName] //这个数组里是父级传过来的变量名字
  }
</script>

这里props写法有很多种第一种就如上定义个数组引入变量名，这种方法不验证传过来的变量类型

第一种props:[youName,youName]
第二种props:{youName:String}后面跟类型注意这时候从[]变成了{},props支持的类型String,Number,Boolean,Array,Object,Function,Promise

第三种是第二种的衍生props:{youName:[String, Number]}可以验证两个类型,还有更多拓展我会写在下面

其他就不写了直接在props这个对象里写了

props:{
  a:{
    type: String,
    required: true  //必填字段
  },
  b: {
    type: Number,
    default: 10 //默认10
  },
  c: {
    type: Object,
    default: function () {
      return { message: 'hello' } // 对象或数组默认值必须从一个工厂函数获取
    }
  },
  d: {
      //添加验证规则
      validator: function (value) {
          // 这个值必须匹配下列字符串中的一个
          return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
  },
  //可用父级向子级传递页面结构块父级用template标签包裹传递子级用这个显示<slot :data="Path"></slot>
  //父级向子集传递页面块状结构的时候可以指定穿插用<template solt='a'></template>子组件使用<slot name='a'></slot>
  Path:{
    type: String,
    default(){
      return null
    }
  },

}

子向父级传值

子向父级传值相当于子级调取父级的函数达到传参效果主要用的是this.$emit

父级

<template>
    <div>
        父级
        <son @change='change'/>
    </div>
</template>
<script>
import son form './min';
export default {
    components: {
        son,
    },
    methods:{
        change(e){
            console.log(e)
        }
    }
  }
</script>

子级

<template>
    <div>
        父级
        <input :value='value' @input="change"/>
        <!-- <input :value='value' @input="$emit('change',$event.target.value)"/> -->
    </div>
</template>
<script>
export default {
    data(){
        return {
            value:0
        }
    },
    methods:{
        change(e){
            this.$emit('change',this.value)
        }
    }

}
</script>

父子双向绑定

有时候封装组件需要父级带入参数修改子级，子级修改的时候父级获得参数类似于element里面的input框等

用.sync写

<!-- 父级 -->
<template>
    <div>
        <input :value='value'/>
        <son :val.sync="value"/>
    </div>
</template>
<script>
    import son form './min'
    export default {
        data(){
            return {
                value:0
            }
        },
        components: {
            son,
        },
    }
</script>

<!-- 子级 -->
<template>
    <div>
        <input :value='value'  @input="$emit('update:value',$event.target.value)"/>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                value:0
            }
        },
        props:['value']
    }
</script>

自定义组件v-model双向绑定

model: {
    prop: 'msg',
    event: 'change'
},
props:{
    msg:String
},

父级demo

<template>
    <div>
        <son v-model="val"></son>
    </div>
</template>

子级demo

<template>
    <div>
        子组件的msg：{{msg}}
        <button @click="modelUpdate">点击改变</button>
    </div>
</template>
<script>
export default {
    name: 'son',
    model: {
        prop: 'msg',
        event: 'change'
    },
    props:{
        val:String
    },
    methods:{
        modelUpdate (){
            this.$emit('change','msg被子组件改变了！')
        }
    }
}
</script>

还有种方式

父级

<template>
    <div>
        <son v-model="val"></son> 
    </div>
</template>
<script>
import son from './son'
export default {
  components:{
      son
  },
  data () {
    return {
        val:'000'
    }
  }
}
</script>

子级

<template>
    <div>
        子组件的msg：
        <input :value="value" @input="$emit('input', $event.target.value)">
    </div>
</template>
<script>
export default {
  // 必须是value
  props:{
      value:String
  },
}
</script>