docs: [el-cascader] add guidance on how to set props (#4689)

docs/en-US/component/cascader.md

@@ -49,7 +49,36 @@ cascader/last-level
 
 ## Multiple Selection
 
-Set `props.multiple = true` to use multiple selection.
+Add `:props="props"` in tag and set data `props = { multiple: true }` to use multiple selection.
+
+Do:
+
+```html
+<template>
+  <el-cascader :props="props" />
+</template>
+<script lang="ts">
+  export default {
+    setup() {
+      return {
+        props: {
+          // props.
+          multiple: true,
+        },
+      }
+    },
+  }
+</script>
+```
+
+Don't do:
+
+```html
+<template>
+  <!--  Object literal binging here is invalid syntax for cascader  -->
+  <el-cascader :props="{ multiple: true }" />
+</template>
+```
 
 :::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.
 

docs/examples/cascader/any-level.vue

@@ -3,21 +3,13 @@
     <span class="demonstration"
       >Select any level of options (Single selection)</span
     >
-    <el-cascader
-      :options="options"
-      :props="{ checkStrictly: true }"
-      clearable
-    />
+    <el-cascader :options="options" :props="props1" clearable />
   </div>
   <div class="block">
     <span class="demonstration"
       >Select any level of options (Multiple selection)</span
     >
-    <el-cascader
-      :options="options"
-      :props="{ multiple: true, checkStrictly: true }"
-      clearable
-    />
+    <el-cascader :options="options" :props="props2" clearable />
   </div>
 </template>
 
@@ -27,6 +19,13 @@ import { defineComponent, reactive, toRefs } from 'vue'
 export default defineComponent({
   setup() {
     const state = reactive({
+      props1: {
+        checkStrictly: true,
+      },
+      props2: {
+        multiple: true,
+        checkStrictly: true,
+      },
       options: [
         {
           value: 'guide',

docs/examples/cascader/basic.vue

@@ -14,7 +14,7 @@
     <el-cascader
       v-model="value"
       :options="options"
-      :props="{ expandTrigger: 'hover' }"
+      :props="props"
       @change="handleChange"
     ></el-cascader>
   </div>
@@ -27,6 +27,9 @@ export default defineComponent({
   setup() {
     const state = reactive({
       value: [],
+      props: {
+        expandTrigger: 'hover',
+      },
       options: [
         {
           value: 'guide',

docs/examples/cascader/filterable.vue

@@ -12,7 +12,7 @@
     <el-cascader
       placeholder="Try searchingL Guide"
       :options="options"
-      :props="{ multiple: true }"
+      :props="props"
       filterable
     />
   </div>
@@ -24,6 +24,9 @@ import { defineComponent, reactive, toRefs } from 'vue'
 export default defineComponent({
   setup() {
     const state = reactive({
+      props: {
+        multiple: true,
+      },
       options: [
         {
           value: 'guide',