首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 05.组件

Vue 05.组件

作者头像
LittlePanger
发布2020-04-14 09:04:18
8990
发布2020-04-14 09:04:18
举报

组件

组件: 组件是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化区别:

  • 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;
  • 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;

全局组件定义的三种方式

注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!

  1. 使用 Vue.extend 配合 Vue.component:
// 1.使用 Vue.extend 来创建全局的Vue组件
var login = Vue.extend({
      template: '<h1>登录</h1>'
    });
// 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component('login', login);
<!-- 3.使用组件直接把组件的名称,以 HTML 标签的形式,引入到页面即可 -->
<login></login>

注意:若组件名称中有大写,如myLogin,则标签写为<my-login></my-login>
  1. 直接使用 Vue.component :
Vue.component('register', {
      template: '<h1>注册</h1>'
});
  1. 将模板字符串,定义到template标签中:
<!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->
<template id="tmpl">
  <div>
    <h1>这是通过 template 元素定义的组件</h1>
    <h4>好用,不错!</h4>
  </div>
</template>

​ 同时,需要使用 Vue.component 来定义组件:

Vue.component('account', {
      template: '#tmpl'
});

局部子组件

  1. 组件实例定义方式,使用components属性定义:
var vm2 = new Vue({
  el: '#app2',
  components: { // 定义实例内部私有组件的
    login: {
      template: '#tmpl2'
    }
  },

})
  1. 引用组件:
<template id="tmpl2">
  <h1>这是私有的 login 组件</h1>
</template>

<div id="app2">
  <login></login>
</div>

组件中展示数据和响应事件

  1. 在组件中,data需要被定义为一个方法,例如:
Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好!'
        }
      },
      methods:{
        login(){
          alert('点击了登录按钮');
        }
      }
    });
  1. 在子组件中,如果将模板字符串,定义到了script标签中,那么,要访问子组件身上的data属性中的值,需要使用this来访问;
【重点】为什么组件的data属性必须是一个方法并返回一个对象
<div id="app">
  <counter></counter>
  <hr>
  <counter></counter>
  <hr>
  <counter></counter>
</div>


<template id="tmpl">
  <div>
    <input type="button" value="+1" @click="increment">
    <h3>{{count}}</h3>
  </div>
</template>
var dataObj = { count: 0 }

// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
Vue.component('counter', {
  template: '#tmpl',
  data: function () {
    // return dataObj 使用外部对象时,每次修改的都是这个外部对象,导致三个组件同时都加一
    return { count: 0 }  // 这样返回,每次调用function都会创建一个对象,三个组件互不干扰
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

切换组件

使用flag标识符结合v-ifv-else

只能实现两个组件之间的切换

  1. 页面结构:
<div id="app">
  <a href="" @click.prevent="flag=true">登录</a>
  <a href="" @click.prevent="flag=false">注册</a>

  <login v-if="flag"></login>
  <register v-else="flag"></register>
</div>
  1. Vue实例定义:
Vue.component('login', {
  template: '<h3>登录组件</h3>'
})

Vue.component('register', {
  template: '<h3>注册组件</h3>'
})

// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    flag: false
  },
  methods: {}
});

使用:is属性来切换不同的子组件,并添加切换动画

  1. 组件实例定义方式:
// 组件名称是 字符串
Vue.component('login', {
  template: '<h3>登录组件</h3>'
})

Vue.component('register', {
  template: '<h3>注册组件</h3>'
})

// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
  },
  methods: {}
});
  1. 使用component标签,来引用组件,并通过:is属性来指定要加载的组件:
<div id="app">
  <a href="" @click.prevent="comName='login'">登录</a>
  <a href="" @click.prevent="comName='register'">注册</a>

  <!-- transition负责动画,component负责引用组件 -->
  <transition mode="out-in"><!-- 通过 mode 属性,设置组件切换时的模式 -->
    <component :is="comName"></component>
  </transition>

</div>
  1. 添加切换样式:
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(150px);
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

组件传值

父组件向子组件传值

  1. 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据
<script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是父组件中的消息'
      },
      components: {
        son: {
          template: '<h1>这是子组件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>
  1. 使用v-bind或简化指令,将数据传递到子组件中:
<div id="app">
    <son :finfo="msg"></son>
  </div>

子组件向父组件传值

原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去

父组件将方法的引用传递给子组件,其中,getMsg是父组件中methods中定义的方法名称,func是子组件调用传递过来方法时候的方法名称

<son @func="getMsg"></son>

子组件内部通过this.$emit('方法名', 要传递的数据)方式,来调用父组件中的方法,同时把数据传递给父组件使用

<div id="app">
  <com2 @func="show"></com2>
</div>

<template id="tmpl">
  <div>
    <h1>这是子组件</h1>
    <input type="button" value="点击触发父组件传递过来的 func 方法" @click="myclick">
  </div>
</template>
// 定义组件模板对象
var comObject= {
  template: '#tmpl', // 通过指定Id,加载这个指定Id的 template 元素中的内容,当作组件的HTML结构
  data() {
    return {
      sonmsg: { name: '小头儿子', age: 6 }
    }
  },
  methods: {
    myclick() {
      // 通过@func="show" 拿到父组件的show方法并赋值给func
      // this.$emit('func', 123, 456) 可以传递多个数据
      this.$emit('func', this.sonmsg)
    }
  }
}


// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    datamsgFormSon: null
  },
  methods: {
    show(data) { // 子组件调用show方法,将值传递给父组件并保存在父组件中
      this.datamsgFormSon = data
    }
  },
  components: {
    'com2':comObject // 使用components属性定义子组件
  }
});

demo:评论列表

目标:主要练习父子组件之间传值

<div id="app">

    <com2 @func="fcommit"></com2>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人: {{ item.user }}</span>
            {{ item.content }}
        </li>
    </ul>
</div>

<template id="tmpl">
    <div>
        评论人:<input type="text" v-model="username">
        内容:<input type="text" v-model="content">
        <input type="button" @click="commit" value="提交">
    </div>
</template>
var com2 = {
    template: '#tmpl',
    data() {
        return {
            username:'',
            content:''
        }
    },
    methods: {
        commit() {
            this.$emit('func', {id:Date.now(),user:this.username,content:this.content})
            this.username=''
            this.content=''
        }
    }
}
var vm = new Vue({
    el:'#app',
    data:{
        list: [
            { id: Date.now(), user: '李白', content: '天生我材必有用' },
            { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
            { id: Date.now(), user: '小马', content: '我姓马, 风吹草低见牛羊的马' }
        ]
    },
    methods:{
        fcommit(data){
            this.list.push(data)
        }
    },
    components: {
        com2 // 使用components属性定义子组件
    }
})

使用 this.$refs 来获取DOM元素和组件

可以通过该方法获取子组件的值和方法

<div id="app">
  <div>
    <input type="button" value="获取元素内容" @click="getElement" />
    <!-- 使用 ref 获取元素 -->
    <h1 ref="myh1">这是一个大大的H1</h1>

    <hr>
    <!-- 使用 ref 获取子组件 -->
    <my-com ref="mycom"></my-com>
  </div>
</div>
<script>
  Vue.component('my-com', {
    template: '<h5>这是一个子组件</h5>',
    data() {
      return {
        name: '子组件'
      }
    }
  });


  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      getElement() {
        // 通过 this.$refs 来获取元素内容
        console.log(this.$refs.myh1.innerText);
        // 通过 this.$refs 来获取组件的data
        console.log(this.$refs.mycom.name);
      }
    }
  });
</script>

在普通页面中使用render函数渲染组件

render函数会把整个el指定的容器替换为指定的组件模板,容器内任何东西都会被覆盖

<div id="app">
  <p>444444</p>
</div>
var login = {
  template: '<h1>这是登录组件</h1>'
}

// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  render: function (createElements) { // createElements 是一个方法,调用它能够把指定的组件模板,渲染为 html 结构
    return createElements(login)
    // 注意:这里 return 的结果,会替换页面中 el 指定的那个容器
  }
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 组件
    • 全局组件定义的三种方式
      • 局部子组件
        • 组件中展示数据和响应事件
          • 【重点】为什么组件的data属性必须是一个方法并返回一个对象
      • 切换组件
        • 使用flag标识符结合v-if和v-else
          • 使用:is属性来切换不同的子组件,并添加切换动画
          • 组件传值
            • 父组件向子组件传值
              • 子组件向父组件传值
                • demo:评论列表
                  • 使用 this.$refs 来获取DOM元素和组件
                  • 在普通页面中使用render函数渲染组件
                  相关产品与服务
                  容器服务
                  腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档