zoukankan      html  css  js  c++  java
  • 怎样在 Vue 的 component 组件中使用 props ?

    1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过它来接收从 父组件 传进来的数据 ( 韩梅梅 ).

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <title>Vue Test</title>
    </head>
    <body>
        <div id="app">
            <!-- 这里的 name 表示组件内部的 props name -->
            <myname name="韩梅梅"></myname>
        </div>
        <script>
            // component myname
            Vue.component('myname', {
                props: ['name'],
                template: '<h2>{{ name }}</h2>'
            })
            // Vue 实例
            var vApp = new Vue({
                el: "#app"
            })
        </script>
    </body>
    </html>

    2. 上面这种形式是写死的, 一般不这样用, 而是通过 v-bind 将数据放到 $data 中, 这样可以 动态修改 / 更新 数据. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <title>Vue Test</title>
    </head>
    <body>
        <div id="app">
            <family v-for="item in names" v-bind:name="item"></family>
        </div>
        <script>
            // component family
            Vue.component('family', {
                props: ['name'],
                template: '<h2>{{ name }}</h2>'
            })
            // Vue 实例
            var vApp = new Vue({
                el: "#app",
                data: {
                    names: ["李雷","韩梅梅","李小雷"]
                }
            })
        </script>
    </body>
    </html>

  • 相关阅读:
    3.2.1 webpack-dev-server的使用
    打印预览及打印
    2.1.8 webpack的环境
    常用docker 启动
    github镜像
    Log解析
    【Bzoj4555】【Luogu P4091】求和(NTT)
    【Bzoj3527】【Luogu3338】[Zjoi2014]力(FFT)
    FFT实现高精度乘法
    Bzoj 2190 仪仗队(莫比乌斯反演)
  • 原文地址:https://www.cnblogs.com/aisowe/p/11435382.html
Copyright © 2011-2022 走看看