vue父子组件传值

一.父组件传给子组件

父组件是parent.vue，子组件是children.vue。
1.父组件引入子组件模块，在parent.vue的script中写以下代码,并在components中注册该组件

import centerFigner from "@/components/children";

在template中写代码

<children :myattr="data1" ></children>

其中myattr是要传给子组件的属性名，data1是vue实例中的数据

components:{children}
 data() {
    return {
      data1:[]  
    };
    }

2.子组件中用props接收父组件的值，myattr就可以在children.vue中作为变量使用了

  export default {
  name: 'HelloWorld',
  props:['myattr'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

二.子组件传给父组件

在子组件中写个按钮触发事件，并在事件中把值传过去
vue父子组件传值

在父组件中接收，在调用子组件的地方添加子组件中声明的事件，并绑定方法，此方法的参数便是父组件传的值
vue父子组件传值