vue内置component组件 v-bind: is:实现动态组件

2020-03-11 09:39:03

 

参考地址 内置组件 + v-bind: is:实现动态组件

<component> 元素是vue 里面的一个内置组件。


在<component>里面使用 v-bind: is,可以实现动态组件的效果。






例子解析:

下面例子创建一个包含多个子组件的 vue 实例。


1. vue代码部分:新建 vue 实例 "app",这个实例的 components 里面,有3个组件,这些组件都有各自的模板。分别是 acomp,bcomp,ccomp


2. html 代码部分:使用vue 的内置组件 <component></component>,并使用 "is" 特性(需要通过v-bind 给 "is" 绑定一个值)。"is" 绑定的值传入一个组件名,就会切换到这个组件。


<div id="app">

<component v-bind:is="whichcomp"></component>

<button v-on:click="choosencomp('a')">a</button>

<button v-on:click="choosencomp('b')">b</button>

<button v-on:click="choosencomp('c')">c</button>

</div>

//做一个包含列表组件

//需要给组件创建props--"todos",用于存放组件通过绑定prop --"todo"获取实例中的data数据"todolists"

 

var app=new Vue({

  el: '#app',

components:{

acomp:{

   template:`

<p>这里是组件A</p>

`

},

bcomp:{

   template:`

<p>这里是组件B</p> `

},

ccomp:{

template:`

<p>这里是组件C</p>

`

}},

data:{whichcomp:""},

methods:{

   choosencomp:function(x){

   this.whichcomp=x+"comp"}

   }

})

网页渲染效果:

点击 A 按钮,文字显示切换到 "显示组件A" 




点击C 按钮,文字显示切换到 "显示组件C"


  • 2020-01-08 23:49:13

    laravel 存储base64格式图片

    一、总结 一句话总结: 二、laravel存储64位图片实例 三、laravel 存储前端上传base64图片 四、php将base64字符串转换为图片

  • 2020-01-09 01:24:28

    mac安装ImageMagick与PHP扩展Imagick

    mac安装ImageMagick和php7.2扩展Imagick,从网上搜索教程,感觉好少,有的教程看起来也很麻烦,不过安装起来,没想到竟然如此简单。不非纯灰之力。

  • 2020-01-09 18:49:17

    pecl安装卸载模块,如何自动配置php.ini

    利用pecl安装php模块,可能需要手工配置php.ini,以加载或禁止相关模块。那么pecl install是不是可以自动配置php.ini呢?答案是肯定的。在pecl isntall的提示信息中,苏南大叔找到了下面的类似提示信息:configuration option "php_ini" is not set to php.ini location。这个设置点,就是本文的关键所在。设置好"php_ini"之后,pecl就可以自动修改php.ini中的extension=了。

  • 2020-01-10 10:23:08

    父元素设置min-height子元素设置100%问题

    父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%;只有当父级元素满足min-height:1000px;设置的条件才触发;浏览器默认是不会触发的,所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的.

  • 2020-01-10 15:48:46

    Linux下查看文件精确到秒的修改时间

    今天排查一个BUG遇到一个问题,错误日志中打印的时间精确到秒,但当根据日志中的时间去找对应文件进行验证的时候,发现通过 ls -l 或者 ll 命令,都无法查看到文件精确到秒的修改时间。

  • 2020-01-10 15:55:05

    linux php yum 安装Imagick

    通过pecl安装Imagick扩展,成功到是成功了,很顺利,但是so包并不在我当年用yum安装的php7.2的扩展包内,我把生成的Imagick.so,移动到当前用的php包内,并不能用,提示 undefined symbol: spl_ce_Countable)) in Unknown on line 0。

  • 2020-01-10 15:57:06

    Centos 安装php Imagick 扩展

    yum install ImageMagick ImageMagick-devel ImageMagick-perl 下一步,验证ImageMagick已经安装在你的系统上并验证它的版本