Vue.js コンポーネントの使用方法

今回は、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 などの制限された親子要素を持つ要素は、コンポーネント テンプレートによって指定できます。 aefc3baf03de7c3c7ca7059834a76d2bfd273fcf5bcad3dfdad3c41bd81ad3e5 などの属性です。次のいずれかのソースからの

stringtemplate (埋め込み expressions を許可する文字列リテラル) を使用する場合、そのような制限はありません:

1) aaa5d3bb2eb987992cc85110e8cc53da を設定すると、親コンポーネントはデフォルトのスロットにコンテンツを配布するか、slot="slotName" を指定できます。

2) 親コンポーネントにslot-scope="props"を設定し、サブコンポーネントのスロットタグのプロパティを取得します。

3) 親コンポーネント テンプレートのコンテンツは親コンポーネント スコープでコンパイルされ、子コンポーネント テンプレートのコンテンツは子コンポーネント スコープでコンパイルされることに注意してください。

3. その他

a. v-bind:is = "componentObject" により、コンポーネントを動的に切り替えることができます。切り取ったコンポーネントをキャッシュするには、親要素 7c9485ff8c3cba5ae9343ed63c2dc3f7 を追加します。

b. 子コンポーネントに ref="xx" を設定すると、child = vm.$refs.xx で子コンポーネントが操作できるようになります。 ――あくまで応急処置です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JavaScript文字列の使用方法

WeChatアプレットで双方向データバインディングを実装する方法

以上がVue.js コンポーネントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。