Vue.js 组件

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

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

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

、

组件的域

html

    
        
全局组件和局部组件
    
    
     
    
    
    
     
    

js

// 全局componentVue.component('zjl', {    template: 'I Miss You',    methods:{        onClick: function(){            alert('LaLa-Land');        }    }});// 局部component,而且被提取出来了，直接写在里面也是可以的var weather_component = {    template: '今天是什么天气呢',    methods:{        onClick:function () {            alert("大晴天啦！");        }    }};// 指定生存空间new Vue({    el:'#seg1'});new Vue({    el:'#seg2',    components: {        weather: weather_component    }});

part-7...组件的配置

    
        
组件的配置
    
    
     
点赞不求人的啦!
    
         
     
点赞不求人的啦!不共享data示例
    
     
    
    
    
     
控制点赞数量
    
     
    
    
    
     
将模版提取出来放到html里，在js 中定义时只需要引用相应的id/class
    
     
    
    

// 能重复点赞的自定义组件Vue.component('like', {    template: '赞:{
   {like_count}}',    // 因为每一个组件都要用，所以不能是对象，要写成方法，这样每次都是新的    // 不写成 function 还会报错.......    data: function () {        return { like_count:10 }    },    methods: {        toggle_like: function () {            this.like_count++;        }    }})var app1 = new Vue({    el:'#seg1'});// 只能点赞一次的自定义组件// 提取出来的方式/*var like_component = {    template: '赞:{
   {like_count}}',        data: function () {            return {like_count: 1,liked:true}        },        methods: {            toggle_like: function () {                if (this.liked)                    this.like_count++;                else                    this.like_count--;                this.liked = !this.liked;            }        }    };*/var app2 = new Vue({    el: '#seg2',    components: {        /*like_only: like_component,*/        like_only: {            template: '赞:{
   {like_count}}',            data: function () {                return {like_count: 1,liked:true}            },            methods: {                toggle_like: function () {                    if (this.liked)                        this.like_count++;                    else                        this.like_count--;                    this.liked = !this.liked;                }            },        },    }});var app3 = new Vue({    el: '#seg3',    components: {        like_other_way: {            template: '#like-other-way',            data: function () {                return {like_count: 1,liked:true}            },            methods: {                toggle_like: function () {                    if (this.liked)                        this.like_count++;                    else                        this.like_count--;                    this.liked = !this.liked;                }            },        },    }});

part-8....组件通信-父子组件通信

Prop

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

Vue.component('alert', {    template: '点我',    props: ['msg'],    methods: {        on_click: function () {            alert(this.msg);        }    }    })new Vue({    el:"#seg1"})

未完改天写！累了