Vue props传值 计算属性、监听属性，

Vue Props 父组件子组件传值

　　Script标签里 props和data同级

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

props: {    value: {      type: Boolean,      default: false    },    id: {      type: Number,      default: 0    },    title: {      type: String,      default: ''    }  },

　　

Vue computed 本部分用于模态框打开（添加修改）

　　Sciprt标签里computed和data同级

?

1 2 3 4 5 6 7 8 9 10 11

computed: {    showInfo: {      get () {        const _this = this        return _this.value      },      set (val) {        this.$emit('input', val)      }    }  },

　　

vue watch 计算属性 本部分用于  props 传值过来的value属性、判断页面是否打开、然后判断props传来的Id是否大于0，判断是添加/修改

?

1 2 3 4 5 6 7 8 9

watch: {    value: function (newVal, oldVal) {      if (newVal) {        if (this.id > 0) {          // 后台接口查询数据        }      }    }  }

　子组件传值父组件

?

1 2 3 4

saveinfo () {       let str = 'hello World'       this.$emit('Save', str)     }

　　第一个 Save参数、指定父级组件接受

　　第二个 str 参数 ，传递父级组件参数

父级组件接受方式