Vue组件之props传递数据

发表于 | 分类于

上篇文章说明了组件的 全局注册 和局部注册 Vue学习之组件一

之前是写了一个文本框组件，就一行代码，其实完全可以写的更复杂点，也可以加样式，就跟平时写样式一样。比如我们可以写一个自定义的很炫酷的下拉菜单，然后在页面中需要的地方可以简单地用一个闭合标签引用，显然，这很方便，也使得代码更简洁。那我们现在思考一个问题，引用的组件是一模一样的，但我们在页面各处引用时，经常是需要有一点改变的，这就好比Windows上右键菜单，不同的图标右键菜单功能是不完全一样的。所以应该怎么做呢？

官网上给出Prop选项来传递数据。为了明白，举个栗子。

就拿上篇中的全局注册例子，

1
2
3
4
5
6
7
8
<div id="app">
    <my-input></my-input>
    <hr>
</div>

<div id="app2">
    <my-input></my-input>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
Vue.component("my-input",{   //全局注册
        template:"<input type='text' placeholder='输入文字'>"
    
});

new Vue({
    el:"#app"
});
    
new Vue({
    el:"#app2"
});

上例中，所有的文本框都会有提示输入文字，现在我想每个框都有自己的提示，比如登录框中，有提示输入用户名的，有提示输入密码的。显然要修改的就是placeholder属性。
这时，我们可以这么做。在引用标签里加入一个自定义属性，属性值为你想提示的内容，即修改上面html代码为：

1
2
3
4
5
6
7
<div id="app">
    <my-input warn="输入用户名"></my-input>
</div>

<div id="app2">
    <my-input warn="输入密码"></my-input>
</div>

上面标签中，我各加了一个warn属性，这个属性是自定义的，值也是根据意愿修改，接下来修改js部分，

1
2
3
4
5
Vue.component("my-input",{   //全局注册
        props:["warn"],
        template:"<input type='text' :placeholder='warn'>"

    });

只需在注册代码里修改三处：

  • 添加props属性，如上格式
  • 对应修改placeholder值，如上
  • 别忘了一个重要的，要用v-bind绑定属性，简写:

此时显示结果为：

嗯，这下满意了。