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>
  • 相关阅读:
    Android 统一配置依赖管理
    Android图片压缩工具MCompressor
    Android Studio 打包自定义apk文件名
    sourceTree的下载与安装
    Mac环境下SVN的配置和使用
    AndroidStudio环境搭建
    设计模式之策略模式
    设计模式之状态模式
    设计模式之观察者模式
    mysql 查询小demo
  • 原文地址:https://www.cnblogs.com/500m/p/11767983.html
Copyright © 2011-2022 走看看