Vue组件之从外部获取数据
Posted tangzhi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue组件之从外部获取数据相关的知识,希望对你有一定的参考价值。
即由父组件往子组件传递信息
1、父组件,需先引入子组件,然后注册,调用子组件时直接通过设置属性的方式传值到子组件
<template> <div id="app"> <alert type="success" title="这是一段成功提示的信息" /> </div> </template> <script> import alert from ‘@/components/alert‘//1、引入子组件 export default { name: ‘App‘, components: {//2、注册 alert } }
2、子组件,通过props属性设置向外的接口属性
<template> <div role="alert" :class="[‘el-alert‘,changeAlert,‘is-center‘,‘is-light‘]"> <i :class="[‘el-alert__icon‘,changeIcon]"></i> <div class="el-alert__content"> <slot name="title"> <span class="el-alert__title">{{title}}</span> </slot> </div> </div> </template> <script> export default { props:{ type:{ type:String, default:‘info‘ }, title:{ type:String, default:‘这是一段消息提示的文字‘ } }, computed:{ changeAlert:function(){ return ‘el-alert--‘+this.type;//动态获取class名 }, changeIcon:function(){ return ‘el-icon-‘+this.type; } } } </script>
以上是关于Vue组件之从外部获取数据的主要内容,如果未能解决你的问题,请参考以下文章
jquery之从ajax获取json数据以表格的形式显示在页面上
[死磕 Spring 17/43] --- IOC 之从单例缓存中获取单例 bean