vue 父子组件传值，传递方法

1 父组件

Father.vue---------------


父组件内容a

 2 子组件

son.vue---------------


子组件内容b

3 父组件调用子组件

Father.vue------------



    父组件内容a
    


//引用子组件vue文件
import son from '../../components/Son';

//定义
components:{
    son,
}

---

4.1 父组件传值到子组件

Father.vue------------




    父组件内容a
    


//引用子组件vue文件
import son from '../../components/Son';

//定义
components:{
    son,
}，

//定义数据
data() {
  return {
    data1: '我是父组件传递的参数1',
    data2: '我是父组件传递的参数2',
  }
},

4.2 子组件接收参数

son.vue-----------------------



    子组件内容b
    
{{ data1 }}
    
{{ data2 }}


export default {
  data() {
    return {
        //定义参数,不能是props接收的参数
    };
  },
  created() {
    console.log("-------------------父组件传值data1-->", this.data1)
  },
  
  props: {
    data1: {
      type: Object
    },
    data2: {
      type: Object
    },
  },

}

---

5.1 子组件传值到父组件

son.vue-----------------------



    点击给父组件传值


export default {
  data() {
    return {
        sonData: [{id:1001,name:'张三'},{id:1002, name:'李四'}];
    };
  },
  created() {
  },
  
  methods: {
    sonClick() {
        this.$emit("sonData3","我是传过去的字符串aaa");
        this.$emit("sonData4",this.sonData);
    }
  }

}

5.2 父组件接收参数

Father.vue------------




    父组件内容a
    


//引用子组件vue文件
import son from '../../components/Son';

//定义
components:{
    son,
}，

//定义数据
data() {
  return {
    
  }
},

methods:{
    data3(val) {
        console.log("子组件传过来的参数data3=",val)
    },
    data4(val) {
        console.log("子组件传过来的参数data4=",val)
    },
}