前端必备三大框架之一Vue.js的入门和基础语法（二）

这次我们继续上次的介绍vue.js

Vue.js的组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件分为全局注册组件和局部注册组件

全局注册组件

    <div id="app">
        <!-- 使用组件 -->
        <my-header></my-header>
    </div>

<script>
    // 定义组件
    const MyHeader = {
        template:'<header>头部</header>'
    }
    // 全局注册组件
    Vue.component('my-header',MyHeader)
    new Vue({
        el:'#app'
    })
</script>

局部注册组件

    <div id="app">
      <my-header></my-header>
      <my-conent></my-conent>
      <my-footer></my-footer>
    </div>
    
<script>
    // 定义组件
    const MyHeader = {
       template: '<header>头部</header>', 
    }
    
    const myBanner = {
        template: '<div>轮播图</div>'
    }
    const myNav = {
        template: '<div>导航</div>'
    }
    const MyConent = {
        template: `<div class = "conent">
                    内容
                    <my-banner></my-banner>
                    <my-nav></my-nav> 
                    </div>`,
     components: {
            'my-banner': myBanner,
            'my-nav': myNav
        }
    }
    const MyFooter = {
        template: '<footer>底部</footer>'
    }
    // 注册组件
    new Vue({
        el:'#app',
        components: {
            'my-header': MyHeader,
            'my-conent': MyConent,
            'my-footer': MyFooter
        }
    })
</script>

父子组件之间的传值

组件之间的传值是是让组件连接的重要体现

父传子

<div id="app">
      <!-- 3使用组件 -->
     <my-header></my-header>
  </div>
  
<!-- 父组件调用子组件的地方 -->
 <template id="header">
     <header>头部 <my-banner :msg="msg" :num="num"></my-banner></header>
 </template>

 <template id="banner">
     <div>这是轮播图---{{ msg }}---{{ num }}</div>
 </template>

<script>
    // 1定义组件
    const MyBanner = {
        // props:['msg'],
        template: '#banner',
        props: {
            msg:String,
            num:Number,
        }
    }

    const MyHeader = {
        template: '#header',
        data () {
            return {
                msg:'这是父组件的内容',
                num:123
            }
        },
        components: {
            'my-banner':MyBanner
        }
    }
   
    new Vue({
        el:'#app',
        // 2局部注册
        components: {
            'my-header': MyHeader
        }
    })
    

父组件在调用子组件的地方，添加一个自定义的属性，属性的值为你需要传递给子组件的值，
在子组件定义的地方，添加了一个props选项，它的值是一个由自定义属性组合而成的数组，
在子组件的模板中，通过自定的属性名就可以获取到父组件传递过来的值

子传父

<div id="app">
      <!-- 3使用组件 -->
     <my-header></my-header>
  </div>

 <template id="header">
     <header>头部 <my-banner @aaaa="getData"></my-banner></header>
 </template>

 <template id="banner">
     <div>这是轮播图<button @click="sentData">子组件给父组件传值</button></div>
 </template>

<script>
    // 1定义组件
    const MyBanner = {
        props:['msg'],
        template: '#banner',
        methods: {
            sentData () {
               this.$emit('aaaa','bbbb') 
            }
        }
    }

    const MyHeader = {
        template: '#header',
        methods: {
            getData (str){
                console.log(str)
             }
        },
        components: {
            'my-banner':MyBanner
        }
    }
   
    new Vue({
        el:'#app',
        // 2局部注册
        components: {
            'my-header': MyHeader
        }
    })
</script>

子组件中，通过某一个事件，执行 this.$emit(‘自定义的事件’, ‘需要传递的值’)，在父组件调用子组件的地方，给它 绑定了 子组件中 自定义的事件，事件的实现由父组件实现，注意绑定事件中不要添加（），在父组件中实现时添加 参数，参数就是传递过来的值

非父子组件传值

<div id="app">
    <!-- 3调用组件 -->
    <my-list></my-list>
    <my-count></my-count>
  </div>
</body>
<template id="list">
    <ul>
        <li>111<button @click="add">+1</button></li>
        <li>222<button @click="add">+1</button></li>
        <li>333<button @click="add">+1</button></li>
    </ul>

</template>
<template id="count">
    <div>总数: {{ msg }}</div>
</template>
 
<script>
    // 中央事件总线传值
    const bus =new Vue();

    // 1定义组件
    const List = {
        template: '#list',
        methods: {
            add () {
                // 在发送端用 bus.$emit('',val)
               bus.$emit('count-event',1) 
            }
        }
    }
    const Count = {
        template: '#count',
        data () {
            return {
                msg:0
            }
        },
        mounted () {
            // 接收端用 bus.$on('',function(val){})
            bus.$on('count-event',(val) => { //注意this的指向 不指向vue，所以用箭头函数        
                this.msg += val
            })
        }
    }
  
    new Vue({
        el:'#app',
        // 2注册组件
        components: {
            'my-list':List,
            'my-count':Count
        }
    })

先表明可以 接收数据
bus.on(‘自定义事件’， function (val) {})
如果想要发送消息 bus.emit(‘自定义事件’, val)

动态组件

<div id="app">
 
      <button @click="tem='my-acom'">AAA</button>
      <button @click="tem='my-bcom'">BBB</button>
      <button @click="tem='my-ccom'">CCC</button>
       <!-- 动态调用组件 -->
       <keep-alive include="ause,buse,cuse">  <!--保存输入框的值，在切换的时候不重新渲染-->
            <components :is="tem"></components>
       </keep-alive>
  </div>

<template id="acom">
    <div>
        <input type="text" placeholder="a组件">
    </div>
</template>
<template id="bcom">
    <div>
        <input type="text" placeholder="b组件">
    </div>
</template>
<template id="ccom">
    <div>
        <input type="text" placeholder="c组件">
    </div>
</template>

<script>
    // 定义组件
    const Acom = {
        template: '#acom',
        name:'ause',
        activated () {
            console.log("正在使用a")
        },
        deactivated () {
            console.log("后台使用a")
        }
    }
    const Bcom = {
        template: '#bcom',
        name:'buse',
        activated () {
            console.log("正在使用b")
        },
        deactivated () {
            console.log("后台使用b")
        }
    }
    const Ccom = {
        template: '#ccom',
        name:'cuse',
        activated () {
            console.log("正在使用c")
        },
        deactivated () {
            console.log("后台使用c")
        }
    }

    new Vue({
        el:'#app',
        data: {
            tem:'my-acom'
        },
        // 注册组件
        components: {
            'my-acom': Acom,
            'my-bcom': Bcom,
            'my-ccom': Ccom
        }
    }) 

如果每一个组件内部含有 表单元素 ，默认在动态组件切换的时候，表单数据会有所丢失，可以使用 包裹动态组件，避免组件的重新渲染，<keep-alive include="a,b"></keep-alive>，,那么表示只有 a 和 b 的组件的装填会被保留，而其余的组件都是先卸载，需要的时候再装载， a 和 b为定义组件的时候的name选项的值.

组件和组件之间的传值要好好的去理解，在项目上用处非常广。
本文是自己的理解，有误的地方可以指出，持续更新中…