Vue自定义组件（父元素属性传递）

浮生若梦777

已于 2024-01-30 22:04:26 修改

阅读量373

点赞数 9

分类专栏：前端(Vue/Javascript) 文章标签： vue.js javascript 前端

于 2024-01-25 16:56:47 首次发布

本文链接：https://blog.csdn.net/qq_58626489/article/details/135848551

版权

前端(Vue/Javascript) 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中定义并注册自定义组件（如com-a），包括组件模板的编写，以及如何通过props接收父组件的属性并与数据交互，通过实例代码展示了完整的使用过程。

摘要由CSDN通过智能技术生成

Vue中自定义组件标签：先定义组件内容，然后注册，这里com-a就是自定义组件名

var component_a = {
        template: `<p>{{ title }}</p>
        <p>{{ value1 }}</p>`
    }


components: {
            'com-a': component_a
        }

页面中就可以直接使用了

<div id="app">
        <com-a :title="name1" :value1="q"></com-a>
    </div>

同时可以结合父元素属性传递，实现数据互通

<div id="app">
        <com-a :title="name1" :value1="q"></com-a>
    </div>


var component_a = {
        props: ['title','value1'], //传入父元素属性
        template: `<p>{{ title }}</p>
        <p>{{ value1 }}</p>`
    }

props: ['title','value1']传入父元素com-a中的title和value1属性值，title和value1通过v-bind绑定data中的变量，因为自定义的组件内容中，是无法直接引用data中的变量的，所以通过这种方式可以间接使用。

完整使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="name1">
        <!-- 父元素 -->
        <com-a :title="name1" :value1="q"></com-a>
    </div>
</body>
<script>
    var component_a = {
        props: ['title','value1'], //传入父元素属性
        template: `<p>{{ title }}</p>
        <p>{{ value1 }}</p>`
    }
    const app = Vue.createApp({
        data() {
            return {
                name1: 'Hello',
                q:1+1
            }
        },
        components: {
            'com-a': component_a
        },
        watch: {//监听数据变化
            name1:function(newValue,oldValue){
                alert('新：'+newValue+''+'旧'+oldValue)
            }
        },
    });
    app.mount('#app')
</script>

</html>

浮生若梦777

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue自定义组件（父元素属性传递）

props: ['title','value1']传入父元素com-a中的title和value1属性值，title和value1通过v-bind绑定data中的变量，因为自定义的组件内容中，是无法直接引用data中的变量的，所以通过这种方式可以间接使用。Vue中自定义组件标签：先定义组件内容，然后注册，这里com-a就是自定义组件名。同时可以结合父元素属性传递，实现数据互通。页面中就可以直接使用了。
复制链接

扫一扫