这次给大家带来Vue.js组件的使用 方法,Vue.js组件使用的注意事项 有哪些,下面就是实战案例,一起来看一下。
1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下。
<p id="app">
<my-component></my-component>
<child-component></child-component></p><p id="example">
<my-component></my-component>
<!--在#app内局部注册的组件在此无法被渲染 -->
<child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件 template: '<p>A custom component!</p>'})var Child = {
template: '<p>A child component!</p>'}var app = new Vue({
el: '#app',
components: { //局部组件,仅可在父作用域#app中使用
'child-component':Child
}
})var example = new Vue({
el:'#example'})</script> Salin selepas log masuk
注意:
a. 如
、和、等父子元素有限制的元素,不能直接使用组件模板,可由is属性来指定,如 。若使用来自以下来源之一的字符串 模板 (允许嵌入表达式 的字符串字面量),则没有这些限制:
1)
2) JavaScript 内联模板字符串:
Vue.component('component1',{
template: '<tr><td>child component</td></tr>'
});
Vue.component('component2',{
template: '<table><component1></component1></table>'
}); Salin selepas log masuk
3) .vue 组件
b. 组件实例中 data 必须是一个函数,否则会给每个组件实例返回对同一个对象的引用
2. 父子组件组合使用
a. 父组件传递数据给子组件
1) 在子组件中由props声明预期数据。
2) 属于单向数据流,子组件不能直接修改prop。
3) 若要设置prop类型验证,则不能用字符串数组,应定义:
props:{
propA: Number,
propB: [String, Number]
} Salin selepas log masuk
4) 若要添加非prop属性,则在使用子组件时,在标签中设置该属性="true"。
b. 子组件触发父组件事件
1) 利用 $on(eventName) 监听事件和 $emit(eventName,optionalPayload) 触发事件。
2) 结合定义的空实例,也可允许非父子组件的通信。
c. 父子组件数据组合--利用插槽slot
1) 子组件中设置,父组件可分发内容到默认slot或指定slot="slotName"。
2) 父组件中设置slot-scope="props",可获取子组件slot标签的属性。
3) 需注意父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
3. 其他
a. 通过 v-bind:is = "componentObject",可动态切换组件。若要缓存切出去的组件,则为其添加父元素。
b. 在子组件中设置 ref="xx" ,可由 child = vm.$refs.xx 操作子组件。 -- 只是一种紧急手段。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
JavaScript的字符串怎样使用
微信小程序怎么实现数据双向绑定
Atas ialah kandungan terperinci Vue.js组件的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
2018-06-11 11:57:34
2018-06-15 15:55:18
2018-06-15 15:49:00
2018-06-15 15:46:15
2018-06-15 15:42:38
2018-06-15 15:40:34
2018-06-15 15:39:32
2018-06-15 15:37:14
2018-06-15 15:34:21
2018-06-15 15:22:51
Topik-topik yang berkaitan
Lagi>