vue propsパラメータ親コンポーネントをサブコンポーネントに渡す

propsを使用してデータを転送する
コンポーネントインスタンスの役割ドメインは孤立しています.これは、親コンポーネントのデータをサブコンポーネントのテンプレート内で直接参照できないことを意味します.propsを使用してサブコンポーネントにデータを渡すことができます.
「prop」は、親コンポーネントから転送されるコンポーネントデータのフィールドです.サブコンポーネントはpropsオプションでpropsを明示的に宣言する必要があります.
Vue.component(‘child’,{//props props:[‘msg’],//propはテンプレート内で使用可能//this.msgでtemplate:'{{msg}}}}})を設定し、通常の文字列を入力します.
例==誤った書き方:—–vue.js

 //   props         
 //props , data          

Vue.config.debug = true; Vue.component('child', {//declare the props props: ['msg','nihao','nisha'],//the prop can be used inside templates, and will also//be set as `this.msg` template: '
{{ msg }}{{nihao}}{{nisha}}', data: function() { return { mssage: 'boy' } } }); var vm = new Vue({ el: '#app1' })
正しい書き方:—–vue.js

 //   props         
 //props , data          

Vue.config.debug = true; Vue.component('child', {//declare the props props: ['msg','nihao','nisha'],//the prop can be used inside templates, and will also//be set as `this.msg` template: '
{{ msg }}{{nihao}}{{nisha}}' }); var vm = new Vue({ el: '#app1' })
propsは複数のデータを転送します(順序の問題)第1種:====HTML--
JS – Vue.config.debug = true; Vue.component(‘child’, {//declare the props props: [‘msg’,’nihao’,’nisha’],//the prop can be used inside templates, and will also//be set as `this.msg` template: ‘
{{ msg }}{{nihao}}{{nisha}}‘,/*data: function() { return { msg: ‘boy’ } }*/}); var vm=new Vue({el:'#app 1'})結果:hello!hello1! hello2! 2つ目:====HTML--
JS – Vue.config.debug = true; Vue.component(‘child’, {//declare the props props: [‘msg’,’nihao’,’nisha’],//the prop can be used inside templates, and will also//be set as `this.msg` template: ‘
123{{ msg }}{{nihao}}{{nisha}}‘,/*data: function() { return { msg: ‘boy’ } }*/}); var vm=new Vue({el:'#app 1'})結果:123 hello!123hello1! 123hello2! 3つ目:====HTML--
JS – Vue.config.debug = true; Vue.component(‘child’, {//declare the props props: [‘msg’,’nihao’,’nisha’],//the prop can be used inside templates, and will also//be set as `this.msg` template: ‘
{{ msg }}{{nihao}}{{nisha}}123‘,/*data: function() { return { msg: ‘boy’ } }*/}); var vm=new Vue({el:'#app 1'})結果:hello!123 hello1! 123 hello2!123第四種:====HTML—-
JS
Vue.config.debug = true; Vue.component(‘child’, { //declare the props props: [‘msg’,’nihao’,’nisha’], //the prop can be used inside templates, and will also //be set as this.msg template: ‘{{ msg }}123{{nihao}}{{nisha}}123‘, /*data: function() { return { msg: ‘boy’ } }*/ }); var vm=new Vue({el:'#app 1'})結果:hello!123 123hello1! 123hello2!
結論:
propsに複数のデータが入力されるのは、親コンポーネントのテンプレートクラスに他の要素または文字を追加すると、1-一番前に追加-各サブコンポーネントがレンダリングされる前に追加されます.
2-一番後ろに追加-各サブアセンブリがレンダリングされ、その後ろに追加されます.
3-中間に参加-彼の前のメンツのコンポーネントの後ろに加えて、後ろのサブコンポーネントの後ろに加えます