vue组件传参(父传子)

Vue传值

1.父传子

父组件是通过props属性给子组件通信的
数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）

只能从上到下

实现步骤 

1.子组件在props中创建一个属性，用于接收父组件传过来的值；
2.父组件 引入子组件–>注册子组件–>引用子组件；
3.在子组件标签中添加子组件props中创建的属性；
4.将所要传递的值赋值给该属性。

props接收的几种写法 

1.直接使用 props 以一维数组的方式接收

props: ['childData']

2.接收字符串

props: {
    childData: String //这里指定了字符串类型，如果类型不一致会警告的哦
}

3.使用对象形式接收，并赋予默认值，但是在数组这里接收有问题，一个大坑，请看第四种

props: {
    childData: {
        type: String,
        default: '默认值' //接收数据时给定一个默认值 
    }
}

 4.接收数组，是需要以函数形式接收

 props: {
    minetlist: {
      type: Array,
      default() {
        return []
      }
    }
  }

tpye支持以下数据类型：

String  Number  Boolean  Array  Object  Date  Function  Symbol

props:{
    // 基础的类型检查（‘null’匹配任何类型）
    propA:Number,
    // 多个可能的类型
    propsB: [String,Number],
    // 必须的字符串
    propC: {
        type:String,
        required:true
    },
    // 有默认值的数字
    propD:{
        type:Number,
        default:100
    },
    // 有默认值的对象
    propE:{
        type:Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default:function(){
            return {message:'hello'}
        }
    },
    // 自定义验证函数
    propF:{
        validator: function(value){
            // 这个必须匹配下列字符串中的一个
            return:['success','warning','danger'],indexof(value) !== -1
        }
}

 特别注意:

所有的prop都使得其父子prop形成一个单向数据流，即单向下数据流。父级prop的更新会单向流动到子组件中，但是反过来则不行，单向数据流能防止子组件意外改变父组件的状态。额外的，每次父组件发生改变时，子组件中的prop将会更新为最新的值。

代码演示

1 . 父组件parent.vue代码如下

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :sonMsg="msg"></son> <!-- 子组件绑定msg变量-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'parent',
   data () {
     return {
       msg: '父组件数据',
     }
   },
   components:{son},
 }
 </script>

2 . 子组件son代码如下

 <template>
   <div class="son">
     <p>{{ Msg }}</p>
     <p>子组件接收到内容：{{sonMsg}}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       Msg:'子组件',
     }
   },
   props: {                    //接收sonMsg值
    sonMsg: {
        type: String,
        default: '子组件默认值' 
        }
   }
 }
</script>