【vue】组件

最新推荐文章于 2023-03-15 14:58:13 发布

_Peko_

最新推荐文章于 2023-03-15 14:58:13 发布

阅读量115

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/piano_diano/article/details/112600912

版权

Vue 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

编写组件有3种方式：

方式1：注册全局组件（全局组件）

方式2：引入，或者自定义，并注册组件（局部组件）

方式3：用template标签（局部组件）

组件模板只能有一个根容器，一般建议用<div>，我这里没有用<div>，都只有一个<h>就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<!--父组件-->
<div id="app">
<!--    子组件-->
<!--    组件（自定义标签）-->
<!--    组件可以在页面传递数据到组件对象中，通过props   -->
<!--    直接建立属性，则传的是静态资源（单项流动），例如 name，使用 v-bind:，则传递的是动态资源，例如 val，这里的item是从Vue实例的data中获取的-->
    <component1 v-for="item in items" user-name="jack" v-bind:val="item"></component1>

<!--   【注意】组件的页面与对象的交互，在属性命名上是有规则的：
              如果在对象里的命名为驼峰式，则在页面标签里，属性要以 - 隔开，随后的字符要改为小写
              例如：myLogin  ==>  my-login  -->

    <component2></component2>

    <component3></component3>

<!--    方式3：用template标签-->
    <template id="mycomponent3">
        <li>哈哈哈</li>
    </template>

<!--    除了【属性传递】，还可以【方法传递】-->
    <component4 @fun="vueFunction"></component4>


</div>

<script>
    // 方式1：注册全局组件（自定义一个Vue组件 component1）
    Vue.component("component1",{
        // 参数传递（接收组件的数据 val）
        props:['val','userName'],
        template: '<li>{{userName}}---{{val}}</li>'
    });

    Vue.component("component4",{
        // 参数传递（接收组件的数据 val）
        template: '<button @click="change">点击</button>',
        methods:{
            change(){
                //调用传递下来的方法
                this.$emit('fun');
            }
        }
    });

    // 方式2：局部组件
    let mycomponent2 = {
        template: '<li>嘻嘻嘻</li>'
    };

    let mycomponent3 = {
        template: '#mycomponent3'
    };

    var vm = new Vue({
        el:"#app",
        // Model 数据
        data:{
            message:'hello,vue!',
            items:["A","B","C"]
        },
        components:{
            //注册局部组件
            component2:mycomponent2,
            component3:mycomponent3,
        },
        methods:{
            vueFunction(){
                alert('vue实例的方法');
            }
        }
    });

</script>

</body>
</html>

_Peko_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue】组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><!--父组件--.
复制链接

扫一扫