Vue-组件

来源：互联网发布：软件公寓什么时候预约编辑：程序博客网时间：2024/05/02 04:54

component组件是Vue学习的重点，其实组件就是制作自定义的标签，这些标签在HTML中是没有的。

1.组件的注册：

1）全局注册：

全局化就是在构造器的外部用Vue.component来注册

<body>    <h1>component-1</h1>    <hr>    <div id="app">        <jspang></jspang>    </div>     <script type="text/javascript">        //注册全局组件        Vue.component('jspang',{            template:`<div style="color:red;">全局化注册的jspang标签</div>`        })        var app=new Vue({            el:'#app',            data:{            }        })    </script></body>

2）局部注册组件：

局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<head>    <meta charset="UTF-8">    <script type="text/javascript" src="../assets/js/vue.js"></script>    <title>component-1</title></head><body>    <h1>component-1</h1>    <hr>    <div id="app">      <panda></panda>    </div>     <script type="text/javascript">        var app=new Vue({            el:'#app',            components:{                "panda":{                    template:`<div style="color:red;">局部注册的panda标签</div>`                }            }        })    </script></body>

2.组件的构成：

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

3.组件的通信（props）：

props选项就是设置和获取标签上的属性值的。

Html文件：

1
<panda v-bind:here="message"></panda>

javascript文件：

        varapp=newVue({            el:'#app',            data:{              message:'SiChuan'            },            components:{                "panda":{                    template:`<divstyle="color:red;">Pandafrom{{here}}.</div>`,                    props:['here']                }            }        })

注意：

我们在写属性时经常会加入’-‘来进行分词，比如：<panda from-here=”China”></panda>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。

3.单向数据流：

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。

注意：

在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

4.动态组件：

通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：

var vm = new Vue({  el: '#example',  data: {    currentView: 'home'  },  components: {    home: { /* ... */ },    posts: { /* ... */ },    archive: { /* ... */ }  }})<component v-bind:is="currentView">  <!-- 组件在 vm.currentview 变化时改变！ --></component>

5.组件缓存：

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

<keep-alive>  <component :is="currentView">    <!-- 非活动组件将被缓存！ -->  </component></keep-alive>

阅读全文

1 0