欢迎光临

木子屋

标题: Vue组件学习笔记

作者: dnawo

日期: 2023-04-05 10:57 AM

分类: 脚本语言

内容:
一、Vue组件
1.局部组件
复制内容到剪贴板 程序代码<div id="app">
<website></website>
</div>
<script>
new Vue({
el: '#app',
//局部组件
components: {'website': {template: '<span>自定义局部组件!</span>'}}
})
</script>
2.全局组件
复制内容到剪贴板 程序代码<div id="app">
<website></website>
</div>
<script>
//全局组件
Vue.component('website', {
template: '<span>自定义全局组件!</span>'
})
new Vue({
el: '#app'
})
</script>
二、Vue组件间传值
复制内容到剪贴板 程序代码<div id="app">
<!-- name为静态值，url为动态值 -->
<website name="木子屋" v-bind:url="url"></website>
</div>
<script>
Vue.component('website', {
props: ['name', 'url'],
template: '<span>{{name}} - {{url}}</span>'
})
new Vue({
el: '#app',
data: {
url: 'www.mzwu.com'
}
})
</script>

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.689 ms

返回

标题: Vue组件学习笔记

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.689 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.721 ms

返回