VUE学习笔记 父子组件传值

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

子组件向父组件传值

子组件使用 this $emit（'自定义事件名',要传送的数据）向父组件传递数据。

1.template 模块里面直接使用this $emit（'自定义事件名',要传送的数据）

2.事件里面使用this $emit，使代码结构更清晰

//这是子组件 editData.vue

保存

//或者

取 消

methods: {

editCancel() {

  // this.$emit('editCancel',this.editVisible); // 带参数
  this.$emit('editCancel'); // 不带参数
    }

}

父组件中引入子组件, v-on(简写@)监听自定义事件

//这是父组件  index.vue
// 引入子组件
import EditData from "./editData.vue";
 components: { 
    EditData
  },
// 使用子组件


//JS
methods: {
  editCancel(data) {
      console.log(data)//data 传过来的参数
    }
}

父组件向子组件传值

父组件使用子组件时, 使用v-bind绑定数据,

//父组件
 
//data数据
data() {
    return {
        list: {},
        editVisible: false,
    };
  },

子组件通过props接收传递的值

  // props简单接收
   props: ["editVisible", "list"]

//props 验证
//验证传入的 props 参数的数据规格，如果不符合数据规格，Vue 会发出警告。
 props: {
    editVisible:Boolean,
    list:{
      type: Object,  // 类型
      required: true // 必传,不能为空
    }
},
// 传过来的值也可以使用computed计算属性