vue 组件

作者: zz77zz | 来源:发表于2019-03-07 19:59 被阅读2次

    时间 16点17分
    开始正式开启组件学习 兴奋
    继续学习

    
    <script>
    //组件注册
    //注册之前记得引入
    import global_com from '文件路径'
    
    //全局组件注册
    vue.component("com",global_com) //任何子组件都能用全局注册的组件 不如button 之类的
    
    //局部组件注册
    同样是先引入
    import local_com from '文件路径'
    
    export default {
      name: 'father_com',
      data () {
        return {
          msg: null
        }
      },
    components:{
      "banner":local_com                   // 在模板template里就能用 <banner></banner> 标签了
    }
    }
    </script>
    
    //css 作用域
    加上scoped 会让 标签拥有作用域且 每个标签上 增加 data-v- 数值  这个数值决定作用域
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    
    

    组件怎么传值?
    组件给组件传递数据
    父组件给子组件传递

    传值 string number boolean
    引用 obj array

    props 官网介绍的挺齐全的
    props 还要做类型检测

    子组件向父组件传递值 官网例子 简单直接 官网链接

    <blog-post v-on:enlarge-text="postFontSize += $event">
    </blog-post>
    
    <button v-on:click="$emit('enlarge-text', 0.1)">
      Enlarge text
    </button>
    
    $emit   // 事件 传递
    $event // 值
    $emit('事件','值')      
    父组件接收 v-on:'事件' = 函数(值)
    methods 里定义 函数 然后获取 值 之后做相应处理 我是这么理解的不知有错么
    

    生命周期

    这是一个比较重要的点 在实例化之前 如果有请求跟交互要做 可以写在实例化之前

    贴上官网的图

    看着就比骄好理解

    api真的好多好多看完是不太可能了 具体用到具体在查吧

    相关文章

      网友评论

        本文标题:vue 组件

        本文链接:https://www.haomeiwen.com/subject/nothpqtx.html