组件 (Component) 是 vue.js 最强大的功能之一.
组件可以扩展 html 元素, 封装可重用的代码.
组件系统让我们可以用独立可复用的小组件来构建大型应用, 几乎任意类型的应用的界面都可以抽象为一个组件树:
注册一个全局组件语法格式如下:
vue.component(tagName, options)
tagName 为组件名, options 为配置选项. 注册后, 我们可以使用以下方式来调用组件:
<tagName></tagName>
全局组件
所有实例都能用全局组件.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- Vue 测试实例 - 菜鸟教程(runoob.com)
- </title>
- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
- </script>
- </head>
- <body>
- <div id="app">
- <runoob>
- </runoob>
- </div>
- <script>
- // 注册
- Vue.component('runoob', {
- template: '<h1 > 自定义组件!</h1>'
- })
- // 创建根实例
- new Vue({
- el: '#app'
- })
- </script>
- </body>
- </HTML>
局部组件
我们也可以在实例选项中注册局部组件, 这样组件只能在这个实例中使用:
- <div id="app">
- <runoob></runoob>
- </div>
- <script>
- var Child = {
- template: '<h1 > 自定义组件!</h1>'
- }
- // 创建根实例
- new Vue({
- el: '#app',
- components: {
- // <runoob> 将只在父模板可用
- 'runoob': Child
- }
- })
- </script>
- Prop
prop 是父组件用来传递数据的一个自定义属性.
父组件的数据需要通过 props 把数据传给子组件, 子组件需要显式地用 props 选项声明 "prop":
- <div id="app">
- <child message="hello!"></child>
- </div>
- <script>
- // 注册
- Vue.component('child', {
- // 声明 props
- props: ['message'],
- // 同样也可以在 vm 实例中像 "this.message" 这样使用
- template: '<span>{{ message }}</span>'
- })
- // 创建根实例
- new Vue({
- el: '#app'
- })
- </script>
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式, 也可以用 v-bind 动态绑定 props 的值到父组件的数据中. 每当父组件的数据变化时, 该变化也会传导给子组件:
- <div id="app">
- <div>
- <input v-model="parentMsg">
- <br>
- <child v-bind:message="parentMsg"></child>
- </div>
- </div>
- <script>
- // 注册
- Vue.component('child', {
- // 声明 props
- props: ['message'],
- // 同样也可以在 vm 实例中像 "this.message" 这样使用
- template: '<span>{{ message }}</span>'
- })
- // 创建根实例
- new Vue({
- el: '#app',
- data: {
- parentMsg: '父组件内容'
- }
- })
- </script>
以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中:
- <div id="app">
- <ol>
- <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
- </ol>
- </div>
- <script>
- Vue.component('todo-item', {
- props: ['todo'],
- template: '<li>{{ todo.text }}</li>'
- })
- new Vue({
- el: '#app',
- data: {
- sites: [
- { text: 'Runoob' },
- { text: 'Google' },
- { text: 'Taobao' }
- ]
- }
- })
- </script>
注意: prop 是单向绑定的: 当父组件的属性变化时, 将传导给子组件, 但是不会反过来.
来源: http://www.bubuko.com/infodetail-3323106.html