9.Vue组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。


【资料图】

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

9.1全局组件

所有实例都能用全局组件。

案例1：

            
     <script>     //注册组件         Vue.component("mycomponent",{             template:"
  • 这里是组件的内容
    • "         });         var v= new Vue({             el:"#app",         });     </script>

    说明：

    注册组件Vue.component（"组件名称"，{组件的属性}）

    案例2：

     
    <script>//注册组件  mymenu：组件的名字  {}里面是组件的属性配置Vue.component("mymenu",{//data数据，这里的数据和vue实例中的数据不同，这里data类型是函数而非对象。data:function(){return{count:0}},//组件的模板只能有一个根元素     template:"
    "+    "
    ",        //需要用到的方法    methods:{    sub:function(){    this.count--;    },    plus:function(){    this.count++;    }        }})var  v=new Vue({el:"#app"})</script>

    9.2 如何在其它html页面访问vue组件

    1.将组件内容写入一个vue页面中

    welcome.vue

    <script>module.exports = {data:function(){return {msg:"daimenglaoshi"}}}</script>

    2.在html页面中导入vue组件并使用

    因为html中不能直接使用vue页面的内容，需要用到插件http-vue-loader。

    下载http-vue-loader.js文件 或者在线调用：

    <script src="https://unpkg.com/http-vue-loader"></script>

    html中调用：

    <script type="text/javascript" src="js/vue.js" ></script><script type="text/javascript" src="js/http_vue_loader.js" ></script>
    <script>var v=new Vue({el:"#app",components:{"welcome":httpVueLoader("welcome.vue")}})</script>

    9.3 局部组件

    一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册。

    案例代码：

        <script>        var msg = {    template:"
    您好，{{name}}
    ",    data(){        return{            name:"呆萌老师"        }    }}        //该组件只在本Vue实例中使用        var v=new Vue({        el:"#app",        components:{        welcome:msg    }        })        </script>

    9.4 父子组件

    组件可以嵌套，父组件中可以套入一个子组件

    测试代码：

    <script>    //注册父组件Vue.component("father",{template:"
    我是一个父组件
    ",//父组件中添加子组件components:{son:{template:"我是一个子组件"}}})var v=new Vue({el:"#app"})</script>

    9.5使用 props 属性动态传递参数

    格式：props:["value"]    data里面的数据会传递到组件里的props属性

    案例代码1：

    <script type="text/javascript" src="js/vue.js" ></script>
    <script>Vue.component("show",{props:["value"],template:"
  • {{value}}
    • "})var v=new Vue({el:"#app",data:{items:["吃饭","睡觉","打豆豆"]}})</script>

    案例代码2：

                           
                         <script>         Vue.component("mydiv",{             props:["value"],             template:"
  • {{value}}
    • "         });         var app = new Vue({             el:"#app",             data:{                 item:"呆萌"             }         });     </script>

    10.Watch 选项

    vue的选项很多，除了前面用到的el，data，methods等，还有其它的。比如Watch

    数据变化的监控经常使用，例如天气预报的穿衣指数，它主要是根据温度来进行提示的。温度大于25度时，我们建议穿T恤短袖，温度小于25度大于0度时，我们建议穿毛衣外套，温度小于0度时我们建议穿棉衣羽绒服。

    测试案例：

    <script type="text/javascript" src="js/vue.js" ></script>输入温度，显示穿衣指数
    温度:{{temperature}}
    穿衣建议:{{advise}}
    输入温度:
    <script>var v=new Vue({el:"#app",data:{temperature:"",advise:""},//监控温度的变化watch:{temperature:function(newVal,oldVal){  if (newVal > 25) {                        this.advise ="建议穿T恤短袖";                    } else if (newVal >= 0 && newVal <= 25) {                        this.advise ="建议穿毛衣外套";                    } else {                       this.advise ="建议穿棉服羽绒服";                    }}}})</script>

    测试结果：

    推荐内容