vue组件的基本知识点

Posted 2021-01-02 ly2646

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   */