Vue親子の模造値とコンポーネントの伝値の3つの方法

ここはVue 1.0に対して針です。2.0を習うなら、公式文書を見に行くことをお勧めします。
vue 2.0 http://vuefe.cn/guide/
vue-router 2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html
第一種類

<div id="example">
  <my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //        
  //  extend  ，vue    
  Vue.component('my-component', {
    //             ，     ‘-'       
    data:function(){
      return{
        parentMsg: '    '
      }
    },
    template: '<div>'
        +'<input v-model="parentMsg">'
        +'<br>'
        +'<child-component :my-message="parentMsg"></child-component>'
        +'</div>',
    components: {
      'child-component': {
        props: ['myMessage'],
        template: '<div>{{myMessage}}</div>'
      }
    }
  });
  //      1
  new Vue({
    el: '#example'
  });
</script>

何か迷ったことがあったら、公式サイトの文書を調べてもいいです。プロ传値はここで直接拷問してみてもいいです。何かいい紹介があれば、またシェアしてもらいたいです。
第二種

<div id="example">
  <my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //        
  //  extend  ，vue    
  Vue.component('my-component', {
    data:function(){
      return {
        name:'xiaoming',
        age:20
      }
    },
    //             ，     ‘-'       
    template: '<div >{{name}}Parent</div><child1-component v-bind:msg-name="name"></child1-component>',
    components: {
      'child1-component': {
        //    props
        props: ['msgName'],
        template: '<div>A child-111111 component!{{msgName}}</div>'
      }
    }
  });
  //      1
  new Vue({
    el: '#example'
  });
</script>

第三種

<div id="example">
  <my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //        
  //  extend  ，vue    
  Vue.component('my-component', {
    data:function(){
      return {
        name:'xiaoming',
        age:20
      }
    },
    //             ，     ‘-'       
    template: '<div >{{name}}Parent</div><child1-component some="1 + 1"></child1-component><child2-component :some="1 + 3"></child2-component>', 
    components: {
      'child1-component': {
        //    props
        props: ['some'],
        template: '<div>{{some}}</div>',
        ready:function(){
          console.log(this.some)
        }
      },
      'child2-component': {
        //    props
        props: ['some'],
        template: '<div>{{some}}</div>',
        ready:function(){
          console.log(this.some)
        }
      }
    }
  });
  //      1
  new Vue({
    el: '#example'
  });
</script>

この例は主にコロンとコロンの区別を説明します。コロンを持たないと文字列のデッド値です。コロンを持って父のモデルのdataに値を探しに行きます。
締め括りをつける
以上は小编が皆さんに绍介したVue父子の模板伝値とコンポーネントの伝値の3つの方法です。皆さんに助けてほしいです。もし何か疑问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。