vue父子组件之间的传值

一、父组件传值给子组件：
父组件部分：
1、在父组件里引入（import）子组件： import 子组件名 from ‘@/components/子组件的vue文件’
2、在父组件的components注册子组件：components: { 子组件名 }
3、在template里面引入<首字母小写子组件名></首字母小写子组件名>
4、<首字母小写子组件名 :parentData=“parentMsg”></首字母小写子组件名>，其中 parentData是自定义的，取什么名字随你喜欢，parentMsg是要传给子组件的值，可以直接写内容，也可以在data的return里自定义，若是从data的return里自定义，则parentData前面需要英文冒号“:”
最后上图更直观：

子组件部分：
1、用props接收父组件传过来的值：props: [‘parentData’]，这里的parentData必须和父组件里的parentData名字一样
最后上图更直观：

二、子组件传值给父组件：
子组件部分：
1、在子组件的template里定义触发函数@click=“childClick”，函数名可以随便取名字
2、用$emit传值给父组件：在childClick函数里面定义this.$emit(‘childToParent’, ‘子组件传值给父组件’);第一个参数childToParent可以自定义名字，第二个参数为要传的值
最后上图更直观：

父组件部分：
1、在父组件里引入（import）子组件： import 子组件名 from ‘@/components/子组件的vue文件’
2、在父组件的components注册子组件：components: { 子组件名 }
3、在template里面引入<首字母小写子组件名></首字母小写子组件名>
4、<首字母小写子组件名 @childToParent=“parentClick”></首字母小写子组件名>，其中 childToParent必须和子组件的childToParent名字一样，parentClick是自定义的，取什么名字随你喜欢
5、parentClick(data) {},里的data则是触发parentClick函数后的子组件传过来的值
最后上图更直观：