zoukankan      html  css  js  c++  java
  • 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>    
  • 相关阅读:
    serialize
    事件委托
    javascript checkbox 全选
    动态加载javascript和css
    使用javascript替换img标签里的src属性图片不显示的原因(IE6)
    unique
    android 判断网络状态
    httpclient超时
    android 根据uri获取路径
    HttpClientAdapter(工具类)
  • 原文地址:https://www.cnblogs.com/tangzhi/p/12643951.html
Copyright © 2011-2022 走看看