zoukankan      html  css  js  c++  java
  • vue父子组件传值

    vue中组件的嵌套数值传递一直不是很清晰,今天理清下思路。

    1、在页面中有一个父组件的模板。

    从父传给子的数值:我是父亲
    我是子组件

    
    
    
    <template>//父组件
      <div>
        <div>
          <son :fatherdata="name" @getdata="getdataval"></son>  //子组件    //1.1      //2.2    
    {{sondata}} //2.4
    </div> </div> </template> <script> import son from './Son.vue' //引入子组件
     export default{
    data(){
    return(){
    name:
    '我是父亲',
    sondata:'' //2.4
    }
    },
    components:{   //引入子组件
     son
    },
    methods:{
    getdataval(data){ //2.3
    this.sondata=data //2.4
    }
    }
    
    
      }
    </script>
    新起一个页面Son.vue
    <
    template>//子组件 <div> <div> <h1>从父传给子的数值:{{fatherdata}}</h1> //1.3
    <button @click="send">将数据传递给父</button> //2.1 </div> </div> </template> <script> export default{ data(){ return(){ message:'我是子组件' } },
    props:['fatherdata'],//1.2
    methods:{
    send(){
    this.$emit('getdata',this.message) //2.1
    }
    }
    }
    </script>

    1、父组件向子组件传值

            1、在子组件的标签里通过v-bind绑定一条属性,属性值为父组件的数据名称。

            2、在子组件的模板中利用props属性把已经绑定的属性值写进去。

            3、在子组件的template中就可以使用这个数据了。

    2、子组件向父组件传值(使用自定义事件)

           1、在发数据组件的methods里定义一个方法,方法中使用如下:this.$emit('event',value)。其中event是自定义事件名,value是要传递的数据。

            2、在发数据组件的标签里  @自定义事件名称=“函数名” 。

            3、在接收组件的methods里,函数名(val){val}  。其中val就是接收的数据了。

            4、在接收组件中声明值,就可以正常调用

        

  • 相关阅读:
    【C#】最完整的IIS添加WCF配置
    IIS配置中增加对WCF程序的支持svc(IIS10中添加WCF支持几种方法小结)
    ASP.NET C#各种数据库连接字符串大全——SQLServer、Oracle、Access
    记一次 .NET 某医院HIS系统 CPU爆高分析(Windbg)
    C#调用Win32 API 的方法
    闲无聊,发个winform中使用html编辑器的方案
    使用非托管 DLL 函数
    flask中的CBV和FBV
    2.6 CSS3其他特性(了解)
    2.5 CSS3盒子模型
  • 原文地址:https://www.cnblogs.com/colorful-paopao1/p/11327483.html
Copyright © 2011-2022 走看看