zoukankan      html  css  js  c++  java
  • vue

     1,父组件 App.vue  传值:   
     
    <template>
      <div id="app">
        <Todos :todos="todos"/>   <!-- 父组件传递到子组件 -->
      </div>
    </template>

    <script>
    import Todos from './components/Todos'
    export default {
      name:'app',
      data(){
        return{
          name:"123",
          todos:[
            {id:1,title:"代办事件1",completed:false},
            {id:2,title:"代办事件2",completed:false},
            {id:3,title:"代办事件3",completed:false},
          ]
        }
      },
      components:{
        Todos:Todos
      }
    }
    </script>
     
    2,子组件Todos.vue   接收
     
    (1)第一种接收方式
     
    <template>
      <div>
        <div v-for="todo in todos" :key="todo.id">
            {{todo}}
        </div>
      </div>
    </template>

    <script>
    export default {
        name:'todos',
        props:["todos"]   //接收 父组件送来的 todos , 绑定到v-for
    }
    </script>
     
    (2)第二种接收方式
    <template>
      <div>
        <div v-for="todo in todos" :key="todo.id">
            {{todo}}
        </div>
      </div>
    </template>

    <script>
    export default {
           name:'todos',
           props:{
            todos:{
                type:Array
          // default :  。。。
            }
          }
    }

    </script>
  • 相关阅读:
    十一.状态设计模式
    十. 享元设计模式
    Orcale(一)概念
    java类加载器
    spring中的事务管理机制
    spring中的annotation注解类配置
    countDownLatch和Semaphore用于多线程
    布隆过滤器
    mybatis-genator自动生成的mapper中模糊查询使用方法
    java中的异常
  • 原文地址:https://www.cnblogs.com/500m/p/11767983.html
Copyright © 2011-2022 走看看