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

php中世界最好的语言
リリース: 2018-05-11 11:37:04
オリジナル
2474 人が閲覧しました

今回は、Vue.jsコンポーネントの使い方と、Vue.jsコンポーネントを使用する際の注意点について、実際の事例を交えて見ていきましょう。

1. すべての Vue コンポーネントも Vue インスタンスであり、グローバル コンポーネントとローカル コンポーネントに分かれています。 登録方法は次のとおりです。

<p id="app">
    <my-component></my-component>
    <child-component></child-component></p><p id="example">
    <my-component></my-component>
    <!--在#app内局部注册的组件在此无法被渲染 -->
    <child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件  template: '<p>A custom component!</p>'})var Child = {
    template: '<p>A child component!</p>'}var app = new Vue({
    el: '#app',    
    components: { //局部组件,仅可在父作用域#app中使用
    'child-component':Child
    }  
})var example = new Vue({
    el:'#example'})</script>
ログイン後にコピー

注:

a.
    、、
  • などの制限された親子要素を持つ要素は、コンポーネント テンプレートによって指定できます。 などの属性です。次のいずれかのソースからの

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

    1)
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート