name.show = name.value.includes(state.searchValue)
})
}
return {
...toRefs(state),
onSearch
}
}
上面我们将搜索功能独立到一个js文件中。在 searchName.js 中定义了一些属性和方法，这里的属性也是具有响应式的，最后返回这些内容。在组件中，先引入这个js文件，调用searchName方法，传入需要的参数。在该组件中的searchValue和names两个响应式数据并非自身的所有，而是来自searchName.js中，通过下面演示可以看到，他们的确也具有响应式的特性。
EventBus
setup接收两个参数
props：等同于V2.x中的 props：{}，用于接收父组件传递的参数
ctx：上下文环境。在2.x中的this指向的是全局VUE实例，可以使用this.router、this.router、this.router、this.commit、this.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this，如果你尝试输出this，你回看到它的值是undefined。但可以通过ctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this，如果你尝试输出this，你回看到它的值是undefined。但可以通过ctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this，如果你尝试输出this，你回看到它的值是undefined。但可以通过ctx.root.root.$emit将内容挂在到 $root 上，以使得任何地方都可以访问到。
setup(props, ctx){
...
const total = computed(() =>{
let total = singleVal + doubleVal.value + state.stateVal
ctx.root.$root.$emit('handleClick', {number: total })
return total
})
...
}
...
ctx.root.$root.$on('handleClick', (val) =>{
console.log('我是通过ctx.root.$root.$on触发的，接收的值为：' + val.number);
state.otherTotal = val.number
})
...最后附上composition-api的github：https://github.com/vuejs/composition-api
到此这篇关于你准备好迎接vue3.0了吗的文章就介绍到这了,更多相关vue3.0内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
