• 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>
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    Swing 添加Esc快捷键退出程序
    DefaultTableCellRenderer 自定义
    项目清理和删除svn信息(转)
    时间转换工具类
    Java Swing 日期控件(转载)
    Eureka原理
    SpringCloud之Eureka注册中心集群篇
    spring boot及spring cloud介绍
    spring cloud 服务注册/发现/提供/调用 demo
    eclipse构建maven+scala+spark工程
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13963935.html
Copyright © 2020-2023  润新知