The model attribute of Vue

1. • Use v- model on components

Official website explanation: Allows a custom component to customize props and events when using v-model.

By default, v-model on a component will use value as prop

And use input as event,

But some input types like radio buttons and checkbox buttons may want to use the value prop for different purposes.

Conflicts in these cases can be avoided by using the model option.

Simply put, it is the effect of two-way data binding of components.

It should be noted that the word custom component indicates that its main usage scenario is inside the component,

The next big paragraph explains why

————————————————

Original link: https://blog.csdn.net/seimeiii/article/details/121854665

2. • Use v- model on components

Before we want to change the field in the parent component that controls the state of the child component in the child component, we need a method of $emit, and it is very troublesome to bind the method in the parent component, as follows

in the parent component

It is very simple to use the model in this way. As long as the v-model is bound in the parent component, and the prop and event of the model are defined in the child component, the value associated with the parent-child component can be changed inside the child component, and there is no need to emit the method to the parent component.

In the parent component:

<followUpModal ref="followUpModal" v-model="followUpModalVisible"></followUpModal>

In the subcomponent:

Writing in this way saves the binding method of the parent component, which is much simpler

Paste the code again, some slobs can copy it directly

<el-dialog
    :title="modalTitle"
    :visible.sync="followUpModalVisible"
    width="50%"
    center
    :modal="false"
    class="tool-dialog"
    @close="onclose"
    destroy-on-closecloseBriefModal
    :close-on-click-modal="false">
    <div>test</div>
  </el-dialog>

  model: {
    prop: 'followUpModalVisible',
    event: 'changeVisible',
  },
  props: {
    followUpModalVisible: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },

  methods: {
    // 点击关闭抽屉层
    onclose() {
      // 修改model中的值
      this.$emit('changeVisible', false);image.png
    },
  },