木子屋
 

标题: 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.033 ms

标题: Vue组件学习笔记

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.033 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.033 ms