vue组件间数据交互--props

• 父组件向子组件传值     

1.子组件内部通过props接收传递过来的值

 先在父组件中定义属性，然后在子组件中通过props接收传过来的值。另外，还需要在父组件中注册子组件，用components 注册。

下面示例：

父组件中“name”就是定义的属性，在子组件中通过props接收（注意后面是数组形式接收）

父组件

子组件

<template>     <div> //子组件标签         <childcomp :name="name" @changeName="changeName"  :nameInfo='nameInfo'></childcomp>     </div> </template> <script> //导入子组件     import childcomp from '../components/ChildComp.vue'     export default{         data(){             return {                 name:'我是父组件', 　　　　 nameInfo:['张三',‘李四’,'王五']             }         }, 　　// 注册子组件         components:{             childcomp         },         methods:{             changeName(newName){                 this.name = newName;             }         }     } </script>

<template>     <div @click="changeName('我是子组件')">{{name}}</div>     <p>{{age}}</p>  　<p v-for=(item,index) in nameInfo :key='index'>{{item}} </template> <script> export default{     props:['name','age'],    //或  子组件接收时 可以定义类型的校验 　/*　 props:{ 　　　　name:{ 　　　　　　type:String 　　　　}, 　　　　age:{ 　　　　　　type:Number, 　　　　　　default: 0 　　　　}, 　　　　nameInfo:{ 　　　　　　type:Array, 　　　　　　default(){ 　　　　　　　　return ['张三'] 　　　　　　　　} 　　　　　　} 　　} */     methods:{         //不能在子组件修改props数据，应触发事件让父组件处理         changeName(newName){             this.$emit('changeName',newName)         }     } } </script>

 组件传值props校验

说明：在父组件往子组件中传递数据时，如果子组件有类型的校验，如：只允许给我传Number类型的数据，此时，需要在子组件中增加类型的校验。

props:{

        age:{

            type:Number

        },

        age:{

            type:Number,

             // default表示默认显示的数据，即父组件没给子组件传值，子组件默认显示 age值为0，如果父组件传值了就显示传的值，

            default:0 // default:'' 字符串或数字时可用；

        },

        nameInfo:{

            type:Array,

            //另外需要注意的是，default 只能是字符串或数字时才能直接用下面的语法，如果是数组 或 对象就要用工厂函数了

            default(){  //对象或数组时可用

                return ['张三'] //默认值显示 张三，父组件传什么值就会替换张三

            }

        }  

     }

• 子组件通过触发事件向父组件回传数据

1、子组件通过自定义事件向父组件传递信息

2、父组件监听子组件事件

示例中，在子组件中定义事件，通过特定的 $emit（）方法 ，作用是 让父组件监听，然后在父组件中绑定子组件中定义的事件名称 “@changName“ 。

 *子组件方法带参数传递（比如：删除某个数据）

 　　　删除某个数据时，删除动作要携带这条数据的 id，找到这条数据的id进行删除，一般不要在子组件中进行删除，而要在父组件中操作，那么此时就要

　　通过自定义事件 this.$emit("del-card"，id)  传递数据。在父组件中监听这个事件属性，绑定属性  @del-card =" delcard($event)", （ 注意，这个 $event 就是特定值用来接收的，不要随意改动 ）

      最后，定义删除方法，进行数据的删除。

父组件	子组件

 

 

 props传递数据的原则是：单向数据流

官方给出的解释是：

https://cn.vuejs.org/guide/components/props.html#one-way-data-flow​

【所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。】

-----扩展参考：https://www.jb51.net/article/212876.htm