• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
逍遥汉
博客园    首页    新随笔    联系   管理    订阅  订阅

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

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

 注意:

  - 父组件发送的形式是以属性的形式绑定值到子组件身上。
  - 然后子组件用属性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>

 

时间如白驹过隙,忽然而已,且行且珍惜......
posted @ 2020-11-12 14:57  unfetteredman  阅读(682)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3