Vue组件化开发过程

最新推荐文章于 2023-10-19 22:26:59 发布

.你别皱眉

最新推荐文章于 2023-10-19 22:26:59 发布

阅读量256

点赞数 1

本文链接：https://blog.csdn.net/qq_45938852/article/details/112285270

版权

Vue的组件化开发是Vue的核心之一，Vue讲DOM分解成一个个小组件进行分化开发，这有助开发效率的大大提升，并且避免了代码的重复性，重复的DOM可以使用同样的组件进行渲染。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <paran :messages="message" @getparan="getdata" ></paran>
        
    </div>

    <!-- 子组件模板 -->
    <template id="parans">
        <div>
            <p>接收到父组件的信息是: {{messages}}</p>
            <input type="text" v-model="mymessage" @input="getchild(mymessage)">
        </div>
    </template>

    <script src="vue.js"></script>
    <script>
        Vue.component('paran',{
            template:"#parans",
            data(){
                return {
                    mymessage:this.dates,
                }
            },
            //获取父组件值
            props:{
                messages:{
                    type:String,
                    default:'',
                },
                dates:{
                    type:String,
                    default:'',
                }
            },
            methods:{
                getchild(value){
                    //向上传递值  父组件接收
                    this.$emit('getparan',value);
                }
            }
        })

        //根实例
        const app = new Vue({
            el: "#app",
            data:{
                message:'我是父组件',
                date:''
            },
            methods:{
                //接收子组件的值，并执行子组件的触发事件
                getdata(value){
                    console.log(value)
                }
            }
        })
    </script>
</body>

</html>

上述中，父组件传递了两个数据 message,date给子组件，并v-on绑定了一个 getdata监听子组件的触发事件
子组件通过 props 得到父组件传进来的两个 message,date 数据，将数据存储在在 data 里面，并且通过发射事件this.$emit 触发了父组件 getdata 事件。

.你别皱眉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化开发过程

Vue的组件化开发是Vue的核心之一，Vue讲DOM分解成一个个小组件进行分化开发，这有助开发效率的大大提升，并且避免了代码的重复性，重复的DOM可以使用同样的组件进行渲染。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫