zoukankan      html  css  js  c++  java
  • 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>
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    iOS 7 开发注意事项
    iPhone消息推送机制实现与探讨
    iPhone开发之全景展示(panoramagl)
    cocos2d-x安装和卸载
    使用Objective-C的+(void)initialize初始化static变量
    Objective C类方法load和initialize的区别
    使用Xcode和Instruments调试解决iOS内存泄露
    NSArray的三种排序方法
    Cocoa:NSOperation和NSOperationQueue
    NSNotification、delegate和KVO的区别
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13963935.html
Copyright © 2011-2022 走看看