Vue学习笔记:组件之间的通信
2018/11/20 10:12:39
NO.1 父组件向子组件传值


我们用v-bind绑定了一个name、age、obj这三个是不同类型的的值,等下我们就在子组件中做验证接收

 <template>    <div id="app">      <children-vue :name="name" :num="num" :objdata="myobj"></children-vue>    </div>  </template>

这里有以下几个要注意的点

注意如果传的是一个固定值就不要用:v-bind,也就是前面不要加冒号

<v-children name="name"></v-children>  这样传过去的就是一个固定的name四个字母,也就是字符串

这里有个细节对于初学者来说容易搞混淆,用冒号绑定的值是要在子组件props中接收的名字,用冒号绑定以后后面等于的值是在当前组件中的data中return的值

 //这是父组件  import Children from './components/Children'  export default {    name: 'parent',    data () {        return{          //传的字符串          name:"父组件里面的内容",          //传的number类型          num:100,          //传的对象类型          myobj:{          name:"leilei",          age:25          }        }    },    components:{      childrenVue:Children    },    methods:{    }  }


接下来看下子组件

 <template>    <div>      <div>{{name}}----{{num}}----{{objdata.age}}</div>    </div>  </template>
 export default {    data(){      return{      }    },      // 默认写法      // props:['name','num','objdata']      // 接收指定类型的写法:      // 如果下面name指定类型是String类型你给他传一个Number类型就会报错(报错NaN) Invalid prop: type check failed for prop "name". Expected Number with value NaN, got String with value "父组件里面的内容".      props:{          name:String,          num:Number,          // 多个可能的类型          // num:[String,Number]          // 也可以带有默认值的数字,也就是子组件的标签上没有:num="num"就会显示这里的默认值          // num: {          //     type: Number,          //     default: 100          // },          //          objdata:{              type:Object,              // 以下函数的作用是如果子组件的标签上没有:objdata="myobj" 然后在子组件中接收objdata.age就是这里的30,接收objdata.name就是这里的未知              default:function(){                  return{                      name:"未知",                      age:30                  }              }          }      }  }


我们可以看到父组件的数据传给了子组件,没毛病,结果如下:


2.png5.png

NO.2 子组件向父组件传值


接下来我们讲一下子组件如何向父组件传值,这个要比父组件向子组件传值要麻烦一点,并且学到了一个自定义事件的知识


我们先看子组件

1.首先我们在子组件中定义了一个childClick事件

 <template>  <div>    <p>子组件的内容</p>    <button @click="childClick">点击触发</button>  </div>  </template>


2.然后在子组件的data中定义一个childValue值,这个值就是要传给父组件的值

3.仔细看里面有个$emit方法,我们通过这个方法就可以把this.childValue子组件的值通过parentEvent自定义事件传递到父组件中,最后用父组件中的clickMsg()接收即可

   export default {      name: 'children',      data () {        return {          childValue:"子组件的内容"        }      },      methods: {        childClick () {            // parentEvent是在父组件on监听的方法            // 第二个参数this.childValue是需要传的值,也就是当前子组件中的值          this.$emit('parentEvent', this.childValue)            //this.$emit可以传多个参数            //this.$emit('parentEvent', this.childValue,this.childValue1,this.childValue2)        }      }    }


接下来看父组件


我们先定义一个msg用来接收内容,然后通过parentEvent自定义事件来执行clickMsg事件来接收子组件的内容

 <template>  <div>      <p>父组件的内容</p>      <children-vue  @parentEvent="clickMsg"></children-vue>      <div>子组件传过来的值是:{{msg}}</div>  </div>  </template>


首先定义了一个msg 用来接收

然后我们在clickMsg中传了一个data 这个data就是子组件传过来的数据

   import Children from './Children'    export default {      name: 'parent',      data () {        return {          msg:''        }      },      components:{        childrenVue:Children      },      methods:{        clickMsg(data){              // console.log(data);              // data就是子组件传过来的值          this.msg = data        }      }    }


最后我们来总结一下子组件向父组件传值:我们是通过parentEvent自定义事件来执行clickMsg事件来接收子组件的内容,只要子组件中一点击就会被父组件中的parentEvent监听到,并且在子组件通过$emit第二个参数传到父组件中了,然后在父组件中的clickMsg接收到了值

上一条:没有了

猜你喜欢

发表评论

标签云
返回顶部图片