zoukankan      html  css  js  c++  java
  • vue点击父组件里面的列表动态传值到子组件

    <template>
        <div>
        爸爸
        <div style="background-color:yellow;margin-top:10px" v-for="(el,index) in getArrary" :key="index" @click="sendId(el.id)">{{el.id}}</div>
        <Good :send='data'></Good>
        </div>
    </template>
    <script>
    import Good from './good'
    export default {
      name: 'helloworld',
      components: { Good },
      data () {
        return { 
          getList: {
            data: 'ok'
          },
          data:'',
          getArrary:[
            {
               id:1
            },
            {
               id:2
            },
            {
               id:3
            },
            {
               id:4
            },
            {
               id:5
            }
          ]
        }
      },
      methods: {
        sendId:function(item){
          this.data=item
        }
       }
    }
    </script>
    // 年后
    <style >
    
    </style>

    上面是父组件

    下面是子组件

    <template>
        <div class="hello">
              儿子 {{this.send}}
      </div>
    </template>
    <script>
    export default {
      name: 'project',
      props: ['send'],
      data () {
        return {
        }
      },
      methods: {
      },
      created: function () {
        // this.getSomeThing()
      },
      watch:{
        getNewData:function (){
          return this.send
        }
      }
    }
    </script>

    点击第一行前

    点击第一行后

  • 相关阅读:
    js拷贝
    git
    移动端网页电话号码的拨打
    es6 promise对象
    h5调用qq客户端
    ActiveMQ中的Destination高级特性(一)
    ActiveMQ集群下的消息回流功能
    ActiveMQ的静态网络链接
    深入理解IoC/DI
    ActiveMQ启动多个broker
  • 原文地址:https://www.cnblogs.com/antyhouse/p/9210212.html
Copyright © 2011-2022 走看看