学习vue.js心得

心已赠人 2022-07-12 02:17 218阅读 0赞

编写时间2017-2-7

vue.js编写方式是通过html格式调用模版（元素/标签），这里面的模版可以是template的xml格式，也可以是javascript代码。

组件之间的通信：

父子组件之间：

父组件数据在子组件中使用：用props属性；子组件向父组件传递信息是用events，监听子组件执行方法，然后再运行父组件的方法。

父组件中获取子组件：同ref属性js代码：parent.$refs.a；还有内容分发slot，parent.$slots.b等。

有时候非父子关系的组件也需要通信

<table style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> <pre style="">
     
      
     <div style="min-height:1.5em">
      
       
      <span style="color:rgb(179,179,179)">// 触发组件 A 中的事件</span>
     
      
     </div>
     
      
     <div style="min-height:1.5em">
      
       
      bus.$emit(
      
       
      <span style="color:rgb(66,185,131)">'id-selected'</span>, 
      
       
      <span style="color:rgb(174,129,255)">1</span>)
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

<table style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
 <tbody> 
  <tr style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> 
   <td style="width:776px; border-collapse:collapse; padding:0px; margin:0px"> <pre style="">
     
      
     <div style="min-height:1.5em">
      
       
      <span style="color:rgb(179,179,179)">// 在组件 B 创建的钩子中监听事件</span>
     
      
     </div>
     
      
     <div style="min-height:1.5em">
      
       
      bus.$on(
      
       
      <span style="color:rgb(66,185,131)">'id-selected'</span>, 
      
       
      <span><span style="color:rgb(0,146,219)">function</span> (<span>id</span>) </span>{
     
      
     </div>
     
      
     <div style="min-height:1.5em">  
      
       
      <span style="color:rgb(179,179,179)">// ...</span>
     
      
     </div>
     
      
     <div style="min-height:1.5em">
      
       
      })
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

在更多复杂的情况下，你应该考虑使用专门的 [状态管理模式][Link 1].

[Link 1]: http://cn.vuejs.org/v2/guide/state-management.html