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

    父组件parent.vue  子组件 son.vue

    没有点击子组件的按钮,子组件的值不会传到父组件

    点击按钮之后,子组件的值传到了父组件

     

    父组件 parent.vue 的代码

    <template>
        <div>
          <h1>我是父组件</h1>
          {{fczdz}}
          <son @fcz="fczff" class="son" :aa="msg"></son>
        </div>
    </template>
    
    <script>
      import son from "./Son"
        export default {
            name: "parent",
            components:{
              son
            },
            data(){
              return{
                msg:"这是父组件的值",
                fczdz:""
              }
            },
          methods:{
              fczff(msg2){
                this.fczdz=msg2;
              }
          }
        }
    </script>
    
    <style scoped>
    .son{
      background-color: #ff6700;
       400px;
    }
    </style>
    

      子组件son.vue的代码

    <template>
        <div>
          <h1>我是子组件</h1>
          <h2>这是子组件,后面的值是父组件的</h2>{{aa}}
          <br>
          <br>
          <br>
          <button @click="dian">点我</button>
        </div>
    </template>
    
    <script>
        export default {
            name: "son",
            props:["aa"],
            data(){
                return{
                  msg2:"这是子组件的值"
                }
            },
          methods:{
              dian(){
                this.$emit("fcz",this.msg2)
              }
          }
    
        }
    </script>
    
    <style scoped>
    
    </style>
    

      

  • 相关阅读:
    项目纪实一
    Quartz.net一个简要示例
    ASP.NET MVC4 WebAPI若干要点
    利用委托实现父控件与子控件之间消息传递
    js获取屏幕信息
    jsion大括号和中括号,及调用
    jquery解析jsion
    hibernate初步
    java web笔记
    mysql存储过程
  • 原文地址:https://www.cnblogs.com/daifuchao/p/11814303.html
Copyright © 2011-2022 走看看