关于Vue

官方对component 的属性 is的解释: 有的时候,在不同组件之间进行动态切换是非常有用的,可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现、

拿我们自己话来说就是  多个组件使用同一个挂载点,并动态切换,并且IS属性就是这个组件的“name”值很好理解。

话说这个属性其实挺实用的,比如说我们的创建某个活动之类,需要按步骤创建3步,为了代码的简洁,首先我们想到肯定用组件方式来进行每一步管理,每一步独立起来,方便管理。可读性也高。下面我就按照我工作中代码复述一片。PS: 我用的UI库是iview

一、没有用component中is的写法,是不是很繁琐?

只有通过v-if来控制每一步的组件。(其他自定义属性就不多说了,是业务属性)

二、通过component 组件形式来书写

子组件的prop值,同样可以通过<component ></component >这个组件来传递。相当于是每个子组件的公共部分。

我这里逻辑是只需要监控这个nowCurrent这个值 ,通过子组件里changeStep回调来改变nowCurrent值,从而切换组件。 相比于第一种方式是不是很简洁?

PS:  你用这个模式可能会出现这个错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

这是由于vue有两种模式构建 ,在初始化项目配置的时候,有两个运行环境配置的版本:Compiler 版本、Runtime 版本。

如果你是vue-cli 是2.x版本  可以在配置项加一段话即可,如下图:

vue$: "vue/dist/vue.esm.js"

原文地址:https://www.cnblogs.com/gong-ping/p/13995400.html