首页 > 其他 > 详细

vue-父组件向子组件传递参数

时间:2020-11-12 15:14:07      阅读:22      评论:0      收藏:0      [点我收藏+]

父组件向子组件传递参数:

 注意:

  - 父组件发送的形式是以属性的形式绑定值到子组件身上。
  - 然后子组件用属性props接收
  - 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制
 <!-- 定义根组件 -->
  <div id="app">
    <!-- 在需要动态的数据的时候 需要属性绑定的形式设置,静态值不需要绑定形式传递 -->
   <a-father :father="father"></a-father>
  </div>

  <script>
    // 定义一个全局的子组件,a-father是new vue的子组件
   Vue.component(a-father,{
    //  在需要动态的数据的时候 需要属性绑定的形式设置,静态值不需要绑定形式传递
     template: <div>{{father}}<hr/><h2><a-son :fistMsg="fistMsg"></a-son></h2></div>,
     data: function() {
       return{
        fistMsg:component第一个全局组件传递过来的值,
        fathers:全局子组件
       }
     },
    //  接收new Vue传过来的参数,
     props:[father],
     components:{
      //  a-son是a-father的子组件
       a-son:{
        template:<div>{{fistMsg}}</div>,
        data:function(){
          return{
            sonMsg:a-father子组件
          }
        },
        // 接收a-first传递过来的值
        props:[fistMsg]
       }
     }
   })
    const vm = new Vue({
      el:#app,
      data: {
        msg: hello,
        father:new vue中的father,
        title:titles
      }
    })
  </script>

 

vue-父组件向子组件传递参数

原文:https://www.cnblogs.com/UnfetteredMan/p/13963935.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!