vue的全局api（二）

• 接上上篇的文章继续整理

写在template标签里的模板

<template id="demo2">
             <h2 style="color:red">我是template标签模板</h2>
    </template>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo2'
        })
    </script>

写在script标签里的模板

<script type="x-template" id="demo3">
        <h2 style="color:red">我是script标签模板</h2>
    </script>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo3'
        })
    </script>

组件

• 分为局部组件与全局组件

全局组件

• 全局化就是在构造器的外部用Vue.component来注册，我们注册现在就注册一个<wzj></wzj>的组件来体验一下。

<div id="app">
        <wzj></wzj>
    </div>
    <script type="text/javascript">
        //注册全局组件
        Vue.component('wzj',{
            template:`<div style="color:red;">全局化注册的wzj标签</div>`
        })
        var app=new Vue({
            el:'#app',
            data:{
            }
        })
    </script>

• 说明：组件全局注册后，就可以像一个标签一样在页面上使用，到时候通过vue渲染后就是模板里的内容

局部组件

• 说明：局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<div id="app">
      <panda></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{
                "panda":{
                    template:`<div style="color:red;">局部注册的panda标签</div>`
                }
            }
        })
    </script>

• 比较：从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。

组件与指令的区别？

• 组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。

父子组件中的通信

• 父组件通过props属性给子组件传值，子组件通过$emit事件向父组件传值，可以参考父子组件间的通信

组件在实际项目中的使用

• 实际的项目中，xxx.vue的的vue页面就是一个组件，一个页面可以由一个或多个组件组成，每一个组件都是由三个部分组成，形如：

<template></template>
<script></script>
<style></style>

• 说明template里是放html页面，script里写逻辑（vue实例在这里面，需要引入的组件也在这里引入），style里写样式

当a组件需要b组件，我们怎么做？

• 只需在a组件先引入b组件，最好是用import b from 'b.vue',这是ES6的引入方法，vue支持ES6语法的，然后在a组件的vue实例中注册b组件，这样注册：

var app=new Vue({
            el:'#app',
            data:{ },
            components:{
               b:b
            }
        })

• 这样就a组件中就引入了b组件，然后你在template里<b></b>,这样a组件里就成功的引入并使用了b组件