zoukankan      html  css  js  c++  java
  • 【VUE】6.组件通信(一)父组件向子组件传值

    1. 前提&知识点

      1./components/Father.vue 是父组件, Son.vue 是子组件

      2.父组件像子组件通信

        props

    2.组件通信

      1. 新增一个路由入口 /father(省略)

      2. components -> Father.vue 添加一组数据

    export default {
      name: "Father",
      data() {
        return {
          father_list: ["第一章", "第二章", "第三章", "第四章"]
        };
      }
    };
    

      3.父组件中调用,注册,引用子组件 

    import Son from "./Son.vue";
    

      4. 注册组件

    components: {
        "son": Son
      }
    

      5. 引用组件,绑定一个自定义的key值

    <son :father_list="father_list"></son>
    

      6. 子组件通过props接收父组件传过来的值

    export default {
      data () {
        name: 'Son'
        return {
         // list: ['第一章', '第二章', '第三章', '第四章']
        }
      },
      props: ['father_list']
    }
    

      7. 访问/father 路由

    3. 完整代码

    Father.vue

    <template>
      <div>
        <h2>This is Father</h2>
        <son :father_list="father_list"></son>
      </div>
    </template>
    <script>
    import Son from "./Son.vue";
    export default {
      name: "Father",
      data() {
        return {
          father_list: ["第一章", "第二章", "第三章", "第四章"]
        };
      },
      components: {
        "son": Son
      }
    };
    </script>
    

    Son.vue

    <template>
      <div>
        <ul>
          <li v-for="item in father_list" :key='item'>{{item}}</li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      data () {
        name: 'Son'
        return {
         // list: ['第一章', '第二章', '第三章', '第四章']
        }
      },
      props: ['father_list']
    }
    </script>
    

      

  • 相关阅读:
    go websocket
    go websocket 调试报错 request origin not allowed by Upgrader
    uniapp中使用阿里巴巴图标iconfont
    TS视频一
    ReactiveCocoa
    weak 的内部实现原理
    谈Objective-C block的实现
    基础面试总结
    理解 iOS 的内存管理
    URL Scheme
  • 原文地址:https://www.cnblogs.com/totoro-cat/p/13049549.html
Copyright © 2011-2022 走看看