怎样在 Vue 的 component 组件中使用 props

itxm 2021年03月09日编程语言 372 0

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>