Rumah >hujung hadapan web >tutorial js >Vue.js组件的使用方法

Vue.js组件的使用方法

php中世界最好的语言
php中世界最好的语言asal
2018-05-11 11:37:042512semak imbas

这次给大家带来Vue.js组件的使用方法,Vue.js组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。

  1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下。  

2fb1ec095997abb5abb99340125c8b3b
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3dbe41635306b450881218e857817dde0
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    8c69b8c7e69a6890c44e58d7de1f3c9c
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3a95778579e16b0726f139f43cb421b7b2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83aVue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件  template: 'e388a4556c0f65e1904146cc1a846beeA custom component!94b3e26ee717c64999d7867364b1b4a3'})var Child = {
    template: 'e388a4556c0f65e1904146cc1a846beeA child component!94b3e26ee717c64999d7867364b1b4a3'}var app = new Vue({
    el: '#app',    
    components: { //局部组件,仅可在父作用域#app中使用
    'child-component':Child
    }  
})var example = new Vue({
    el:'#example'})2cacc6d41bbb37262a98f745aa00fbf0

  注意:

  a. 如ff6d136ddc5fdfeffaf53ff6ee95f185、f5d188ed2c074f8b944552db028f98a1和25edfb22a4f469ecb59f1190150159c6、a34de1251f0d9fe1e645927f19a896e8等父子元素有限制的元素,不能直接使用组件模板,可由is属性来指定,如8c31595b8c8ab4183d7f94d39d133c6cfd273fcf5bcad3dfdad3c41bd81ad3e5。若使用来自以下来源之一的字符串模板(允许嵌入表达式的字符串字面量),则没有这些限制:

  1) 91bc4aaf1732b26c8e5fcf53781ed1a6

  2) JavaScript 内联模板字符串:    

Vue.component('component1',{
          template: &#39;<tr><td>child component</td></tr>&#39;
    });
    Vue.component(&#39;component2&#39;,{
          template: &#39;<table><component1></component1></table>&#39;
    });

  3) .vue 组件

  b. 组件实例中 data 必须是一个函数,否则会给每个组件实例返回对同一个对象的引用

  2. 父子组件组合使用

  a. 父组件传递数据给子组件

    1) 在子组件中由props声明预期数据。

    2) 属于单向数据流,子组件不能直接修改prop。

    3) 若要设置prop类型验证,则不能用字符串数组,应定义:     

props:{
         propA: Number,
         propB: [String, Number]
      }

    4) 若要添加非prop属性,则在使用子组件时,在标签中设置该属性="true"。

  b. 子组件触发父组件事件

    1) 利用 $on(eventName) 监听事件和 $emit(eventName,optionalPayload) 触发事件。

    2) 结合定义的空实例,也可允许非父子组件的通信。

  c. 父子组件数据组合--利用插槽slot

    1) 子组件中设置58cb293b8600657fad49ec2c8d37b472,父组件可分发内容到默认slot或指定slot="slotName"。

    2) 父组件中设置slot-scope="props",可获取子组件slot标签的属性。

    3) 需注意父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

  3. 其他

  a. 通过 v-bind:is = "componentObject",可动态切换组件。若要缓存切出去的组件,则为其添加父元素7c9485ff8c3cba5ae9343ed63c2dc3f7。

  b. 在子组件中设置 ref="xx" ,可由 child = vm.$refs.xx 操作子组件。 -- 只是一种紧急手段。 

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JavaScript的字符串怎样使用

微信小程序怎么实现数据双向绑定

Atas ialah kandungan terperinci Vue.js组件的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Vue指令的使用Artikel seterusnya:Dom属性的使用方法