vue中 父子组件之间的传值

vue中父子组件之间的传值

子组件想父组件传值
父组件中

<TrayView @tray-list="trayArrList" ref="trayRules"></TrayView>

子组件中

this.$emit("tray-list", this.trayData)

父组件中的使用

trayArrList(item) {
	// 接收的值是item(this.trayData)
	console.log(item)
}
// 如果想接收子组件中的方法 使用ref 来接收  rese()是方法名
this.$refs.tratRules.rese() 

父组件想往子组件中传值

父组件中

<Content :sonConArr="conArr"></Content>

 data() {
    return {
       conArr:[//向子组件传递的数据
                {
                    name:'Caryl',
                    age:'20'
                },{
                    name:'Sindy',
                    age:21
                },{
                    name:'Nancy',
                    age:22
                }
            ]
    }
  },
  

子组件中

// 和 data平级 使用 props接收 和data中的数据一样去使用
 props:{
       sonConArr:Array,//接受父组件向子组件传递的数据是一个数组
       required:true
    },

今天刚好用到这块的只是点,用的还比较多,就顺手写下来的,希望可以帮到大家