vue解决跨域的方法，vue中父组件和子组件如何通讯

对 el-input 进行封装，封装为 my-input <template> <!-- 使用 $attrs 传入已在父组件中声明但在子组件中未被声明的 props，从而达到当父组件传入的 prop 时，父组件能直接使用子组件的原生属性 --> <!-- 使用 $listeners 传入已在父组件中注册但在子组件中未注册的事件，将父组件中出发的事件直接传递给子组件，从而达到父组件中传入的事件直接在子组件的原生事件中触发 --> <el-input v-model="value" v-bind="$attrs" v-on="$vps云服务器listeners"> <!-- 遍历子组件非作用域插槽，并对父组件暴露 --> <template v-for="(index, name) in $slots" v-slot:[name]> <slot :name="name" /> </template> <!-- 遍历子组件作用域插槽，并对父组件暴露 --> <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data"> <slot :name="name" v-bind="data"></slot> </template> </el-input></template><script> export default { name: 'MyInput', inheritAttrs: false, // 避免将未声明的 props 在 DOM 节点上注册 data() { return { value:'' } }, props: { type: { default: 'a', // 使用 validator 抛出参数异常，如果返回为 false 则异常 validator: prop => ['a','b','c'].includes(prop) } }, created() { }, methods: { myFunc() { console.log('myFunc') } } }</script><style scoped></style>

在实际场景中使用 my-input

<template> <my-input $ref="myInput" clearable @clear="handleClear"/></template><script> import MyInput from './my-input' export default { name: 'test', components: { MyInput }, data() { return { } }, created() { }, mounted() { // 使用 $ref 调用内部方法 this.$refs.myInput.myFunc() }, methods: { handleClear() { console.log('clear') } } }</script><style scoped></style> 37376486