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

荼蘼_2023-07-19 19:10

1 父组件

复制代码

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


<div>父组件内容a</div>

2 子组件

复制代码

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


<div>子组件内容b</div>

3 父组件调用子组件

复制代码

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


<div>
    父组件内容a
    <son></son>
</div>

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

//定义
components:{
    son,
}

4.1 父组件传值到子组件

复制代码

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



<div>
    父组件内容a
    <son :data1="data1"  :data2="data2"></son>
</div>

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

//定义
components:{
    son,
}，

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

4.2 子组件接收参数

复制代码

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


<div>
    子组件内容b
    <div>{{ data1 }}</div>
    <div>{{ data2 }}</div>
</div>

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

}

5.1 子组件传值到父组件

复制代码

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


<div>
    <button @click="sonClick()">点击给父组件传值</button>
</div>

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------------



<div>
    父组件内容a
    <son @sonData3="data3"  @sonData4="data4"></son>
</div>

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

//定义
components:{
    son,
}，

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

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