深入浅出学Vue(四) | Vue组件的使用

目录

    • 初识组件
    • 组件注册
      • 全局组件
      • 局部组件
    • Data与methods
    • 组件切换
      • 使用v-if切换
      • 使用component标签动态切换
    • Prop与传值问题
      • 父组件向子组件传值
      • 父组件向子组件传递方法
      • 子组件向父组件传值
      • 利用ref获取DOM和组件引用
    • 插槽
      • 组件简单应用
      • 具名插槽和匿名插槽
      • vue新版本语法
      • 子组件向父组件传值
    • 动态组件与异步组件
      • 动态组件
      • 异步组件

初识组件

可以通过一个简单的组件来认识组件。

  1. 新建组件

    Vue.component('mycomponent', {
        data: function(){
            return {
                number: 0
            }
        },
        template: '<button v-on:click="number++">值为{
        {number}}button>'
    })
    
    • Vue.component( ‘组件名称’,{组件内容} )
    • data组件数据,必须使用函数的形式返回,这样多个组件才不会使用同一个data,避免相互影响。
    • template组件的html内容,即展示的内容。
  2. 使用组件

    注意:组件必须放在实例创建前

    <div id="app">
    	<mycomponent>mycomponent>
    div>
    
    • 直接用名称定义即可

组件注册

注意:组件只可以有一个外标签,意味着当我们需要使用多个标签时,应该使用一个外标签将其包裹。

全局组件

使用Vue.extend()方法

<div id="app">
    <mycomponent>mycomponent>
div>
<script type="text/javascript">
    var com1 = Vue.extend({
     
        template: '

hello,组件

'
}) Vue.component('mycomponent', com1) var app = new Vue({ el: '#app' })
script>

简写

<div id="app">
    <mycomponent>mycomponent>
div>
<script type="text/javascript">
    Vue.component('mycomponent', {
     
        template: '

hello,组件

'
}) var app = new Vue({ el: '#app' })
script>

通过template绑定外部标签

  • 好不容易从前端的html标签拼接中逃离出来,又要继续使用?当然不是
<div id="app">
    <mycomponent>mycomponent>
div>
<template id="com">
    <h1>hello,组件h1>
template>
<script type="text/javascript">
    Vue.component('mycomponent', {
     
        template: '#com'
    })
    var app = new Vue({
     
        el: '#app'
    })
script>

将组件绑定给变量(简化逻辑)

<div id="app">
    <com>com>
    <com>com>
div>
<template id="com">
    <div>
        <h1>{
  {count}}h1><br>
        <button type="button" v-on:click="add">+1button>
    div>
template>
<script type="text/javascript">
    let component1 = {
     
        template: '#com',
        data: function(){
     
            return{
     
                count: 0
            }
        },
        methods: {
     
            add(){
     
                this.count++
            }
        }
    }
    Vue.component('com', component1)
    var app = new Vue({
     
        el: '#app'
    })
script>

局部组件

局部绑定html标签

<div id="app">
    <com>com>
div>
<script type="text/javascript">
    var app = new Vue({
     
        el: '#app',
        components: {
     
            com: {
     
                template: '

hello,组件

'
} } })
script>

局部绑定外部template

<div id="app">
    <com>com>
div>
<template id="com">
    <h1>hello,组件h1>
template>
<script type="text/javascript">
    var app = new Vue({
     
        el: '#app',
        components: {
     
            com: {
     
                template: '#com'
            }
        }
    })
script>

尽量使用绑定外部template的方式,这样一定程度上可以提高程序的复用性和使逻辑结构更加清晰,特别是当和数据交互时。

将组件绑定给变量(简化逻辑)

<div id="app">
    

你可能感兴趣的:(Vue,vue,vue.js,js,html)