当前位置:
凯发ag旗舰厅登录网址下载 >
前端技术
> vue
>内容正文
vue
vue 单选框样式-凯发ag旗舰厅登录网址下载
凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
vue 单选框样式_作为一位vue工程师,这些开发技巧你都会吗?
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
来源 | http://www.cnblogs.com/chanwahfung/p/12543103.html
路由参数解耦
一般在组件内使用路由参数,大多数人会这样做:export default { methods: { getparamsid() { return this.$route.params.id } }}在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 url 上使用,限制了其灵活性。正确的做法是通过 props 解耦const router = new vuerouter({ routes: [{ path: '/user/:id', component: user, props: true }]})将路由的 props 属性设置为 true 后,组件内可通过 props 接收到 params 参数export default { props: ['id'], methods: { getparamsid() { return this.id } }}另外你还可以通过函数模式来返回 propsconst router = new vuerouter({ routes: [{ path: '/user/:id', component: user, props: (route) => ({ id: route.query.id }) }]})文档: https://router.vuejs.org/zh/guide/essentials/passing-props.html函数式组件
函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。组件需要的一切都是通过 context 参数传递。它是一个上下文对象,具体属性查看 文档 。这里 props 是一个包含所有绑定属性的对象。函数式组件{{item.title}}p>
{{item.content}}p> div> div>template>父组件使用 div>template>import list from '@/components/list.vue'export default { components: { list }, data() { return { list: [{ title: 'title', content: 'content' }], currentitem: '' } }}文档: https://cn.vuejs.org/v2/guide/render-function.html
样式穿透
在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。我们可以使用 >>> 或 /deep/ 解决这一问题: