vue组件中的子组件参数传递

如何在组件中再建立一个组件,并使用父组件中的数据
<body>
  <div id="app">
       <hello :reader="new_msg"></hello>
</div>

 

<script>
     var vm = new Vue({
                el: "#app",
               data: {
                       new_msg: "我是实例中的数据信息"
               },
              components: {
                     "hello": {
                              data() {
                                          return {
                                                  msg: "我是组件中的数据信息"
                                          }
                              },
                            template:`
                                          <h1>我在组件中只读取我组件中的数据,所以{{ msg }} -- {{ reader }}
                                                     //②将子组件的标签写在父模板里面,并在标签内用定义的变量将父组件的数据关联
                                                  再将g绑定在子组件的标签上,值以父组件读取的实例数据的变量为中间值进行传递
                                                     <world :child_reader="msg"  :g="reader"></world>
                                          </h1>                   
                                    `,
                            props: ["reader"],
                             //在组建中再建立一个组件,他仍然拥有组件的所有特征
                            components: {
                                         "world": {
                                                 data(){
                                                         return {
                                                                child_msg: "我是组件中的子组件"
                                                         }
                                                },
                                          template: `
                                                         <h3>如果不传参的话,我也只能读我自己的数据{{ child_msg }},
                                                                   //此处就可以成功的接收到父组件的数据并使用,g就可以读取到实例中的数据
                                                                   <span style="color: red">读取到父组件的数据:{{ child_reader }}</span> {{ g }}
                                                         </h3>
                                                    `,
                                           ①定义一个传带的变量, 可再定义一个g来读取实例中的数据
                                          props: ["child_reader","g"]
                              }
                        }
                   },
              }
         })
       </script>
</body>
posted @ 2017-09-21 20:41  不乱来的嫖客  阅读(565)  评论(0编辑  收藏  举报