vue组件的基本知识点

1. 组件中 is 的特性：

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致一些bug：

<table>
  <row-item></row-item>
</table>

这个自定义组件 <row-item> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="row-item"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串 (例如：template: '...')
• 单文件组件（.vue）
• <script type="text/x-template">

 2. 子组件中的data 是一个函数，返回值return是需要的数据

　　Vue.component('counter',{
　　template:'<div @click="handleClick">{{number}}</div>',
　　data(){
　　　　return{
　　　　　　number: 0
　　　　}
　　}

 

3. ref引用，作用是操纵dom节点

用法：<div ref=" one "></div>

获取整个div： this.$refs.one      /*  $refs指的是所有的ref   */

 4. 组件参数校验

content可以是数组或者对象，type类型，required判断是否必须值，default默认值　

<div id="root">
        <child content="hell"></child>
</div>

Vue.component('child',{
    props: {
        // content: [Number,String]
        content:{
            type: [Number,String],
            required: false,
            default: 'default value ',
            validator: function(value){
                return (value.length > 5)
            }
        }
    },
    template: '<div>{{content}}</div>'
})

 5. 给组件绑定原生事件

一般父组件中绑定的自定义事件都是由子组件通过$emit来传递的 ，

但是加上native后，这里的事件就不再是自定义事件 而是原生的click事件，点击就会触发，不需要子组件来传值

<child @click.native="alertA"></child>

 6. 非父子组件的传值：bus

html:
<div id="root">
    <child content="dell"></child>
    <child content="Lee"></child>
</div>

js:
Vue.prototype.bus = new Vue()   /* 意思是每个vue实例中都有一个bus属性  */
Vue.component('child',{
    data(){
        return{
            selfContent: this.content
        }
    },
    props:{
        content: String
    },
    template: '<div @click="handleClick">{{selfContent}}</div>',
    methods:{
        handleClick(){
            this.bus.$emit('change',this.selfContent)
        }
    },
    mounted:function(){
        var _this = this;
        this.bus.$on('change',function(msg){
            _this.selfContent = msg;
        })
    }
})

var vm = new Vue({
    el: '#root'
})