vue组件

1. 声明全局组件时，一定要将该全局组建放在 Vue 实例之前。

<script type="text/javascript">

//button-counter组件
Vue.component('button-counter', {

data: function(){
    return {
        counter: 0,
        
    }
},
template: '<button v-on:click="counter++">you clicked {{counter}} 次</button>'

})

//blog-post组件
Vue.component('blog-post',{
    props: ['post'],
    template: '<div><p>标题：{{post.title}} </p><p>正文：{{post.content}}</p></div>'  
});
 
 var vm1 = new Vue({
    el: '#app',
    data: {
        styleObj: {
            color: 'red',
            fontSize: '20px',
            height: '20px',
            width: '50px'
        },
       
    }
   
 });

</script>

2. 自定义组件的 template 属性中，所有的元素必须放在一个根节点中：

Vue.component('blog-post',{
    props: ['post'],
    template: '<div><p>标题：{{post.title}} </p><p>正文：{{post.content}}</p></div>'
              
});

3. 自定义组件中，template 属性中写模板时需注意：   

    首尾的 "单引号" 是 Esc 下面那个键。

    模板中用到 "  $emit（）  " 函数时，eg: $emit( ' 事件名 ' ) ；那这这个事件名的写法可以是 " 一个单词 " ，" 多个单词，首字母小写，单词之间用  ‘- ’ 或者 ‘_’ 连接 " 

4. 子模板向父组件传值示例：

<div id="app" >        

       <blog-post v-bind:style="{ fontSize: fontSize+'px' }" v-bind:post="post" v-on:update
        _font="open">
        </blog-post>       
 </div>

 

//blog-post组件
Vue.component('blog-post',{
    props: ['post'],
    template: `<div><p>标题：{{post.title}} </p><p>正文：{{post.content}} </p>
                <button v-on:click="$emit('update_font')">放大字体</button>
              </div>`                  
});

var vm1 = new Vue({
    el: '#app',
    data: {        
       
        title: 'sina blog',
        fontSize: 1
    },
    methods: {
        open: function(){
            this.fontSize+=10;
            alert("this.fontSize: "+this.fontSize)
        },
 }  

• 在子模版的组件中定义需要触发的dom事件，示例中为 v-on:click 的部分，参数解释：

    $emit 的第一个参数为  " 事件名 "（该触发事件绑定的模板事件），也相当于一个事件，可以被父组件监听。

    在调用模板时，v-on:update_font="open" 中的 "  open " 为调用的父组件的函数。其中 update_font 这个组件中的事件名命名方式残参考 "  3 " 。  

•     子组件修改父组件相关属性：

<div id="app" >        

        <button-counter v-bind:style="{ fontSize: size+'px' }" v-on:reduce_size="reduce"> 
        </button-counter>
</div>

Vue.component('button-counter', {

template: `
            <div>
               <span>测试缩小字体</span>
               <button v-on:click="$emit('reduce_size',1)">缩小字体</button>
            </div>
            `
});

var vm1 = new Vue({
        el: '#app',     
        title: 'sina blog',
        size: 20
    },
    methods: {
        
        reduce: function(reduceNum){
            this.size-=reduceNum;
            console.log("size: "+this.size)
        },
)}

在子组件的模板中传递两个参数，第二个参数可直接被父组件的函数接收，在该示例中 " reduceNum " 接收该值，参数可任意命名。