子インスタンスのVue.jsデータ

Vue.jsの子インスタンスにdataオプションを含めるにはどうすればよいですか？子インスタンスのVue.jsデータ

<html> 
    <body> 
     {{ foo }} 

     <script> 
      var root = new Vue({ 
       el: 'body' 
      }); 

      var child = new Vue({ 
       parent: root, 
       data: function() { 
        foo: 'bar' 
       } 
      }); 
     </script> 
    </body> 
</html>

bodyには何も印刷されません。しかし、もし私がfoo変数をルートインスタンスの中に加えると、それは印刷されます。子インスタンスのデータオプションを動作させる方法

const Foo = { 
    data: function() { 
    return { 
     foo: "I am Foo" 
     } 
    }, 
    template: '<div>foo: {{foo}}</div>' 
}

、あなたが唯一の子インスタンスのテンプレートでこのデータプロパティを使用することができます後

出典

2016-12-08 bazi

は、構文は、子VUEインスタンスでdata属性を持つことです。このfiddleの作業デモ全体を見ることができます。

vueコンポーネントを作成して使用する別のスタイルは、hereであり、JSコードがあります。

Vue.component('child', { 
    data() { 
    return { 
     foo: 'bar' 
    } 
    }, 
    template: '#foo' 
}); 

var vm = new Vue({ 
    el: '#root' 
});

出典

2016-12-08 13:22:29 Saurabh

子インスタンスのVue.jsデータ

答えて

関連する問題