Vue组件(详解) 3

简介: Vue组件(详解)

正规型父子通信:

市面上大部分用的都是这种父子通信的方式,相对简单粗暴型会比较难理解一点。

子组件获取父组件数据:

传值属性名规则:

  • 父组件传的属性名最好不要和子组件的属性名一样
  • 父组件传的属性名不要出现大写,可以用英文下划线:”_“ 隔开

传值写法:

age属性是固定的值,name是单项数据绑定和父组件的name属性绑定

<dawa age="18" :name="name"></dawa>

获取写法:

在子组件中和data同级写props来获取

props:["age","name"]

代码演示:

<!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">
        你好,{{name}}
        <dawa age="18" :name="name"></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{{childName}}--{{age}}
                <br>
                <!--在子组件中将获取的属性简单演示一下-->
                父组件----{{age}}--{{name}}
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        props:["age","name"],
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

浏览器结果:

父组件获取子组件数据:

父组件获取子组件数据,采用的是$emit,自定义事件的方式完成的。

父组件获取子组件数据需要做两件事情:

父组件在使用子组件时要给它绑定一个自定义事件

1. <!--@zidingyi是一个自定义事件,此事件会在后面在子组件注册-->
2. <dawa @zidingyi="fuFun" ></dawa>
//父组件里的方法
methods:{
    fuFun(val){
        // 拿到数据
        console.log(val);
    }
}

子组件主动去出发这个事件并传递数据

//点击后给父组件传值
template:`
    <div>
        <button @click="butFun">给父组件传值</button>
    </div>
`,
//子组件里的方法
methods:{
    butFun(){
        // 子组件触发自定义事件zidingyi,同时传递数据
        this.$emit('zidingyi','数据1');
    }
}

代码演示:

<!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">
        你好,{{name}}
        <dawa @zidingyi="fuFun" ></dawa>
    </div>
</body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址-->
<script>
    var dawa={
        template:`
            <div>
                子组件----{{childName}}--{{age}}
                <button @click="butFun">给父组件传值</button>
            </div>
        `,
        data() {
            return {
                childName:"大娃",
                age:18,
            }
        },
        methods:{
            butFun(){
                this.$emit('zidingyi',this.childName);
            }
        }
    }
    let app=new Vue({
        el:"#app",
        data() {
            return {
                name:"父类"
            }
        },
        methods: {
            fuFun(val){
                console.log(val);
            }
        },
        components:{
            dawa
        },
    })
</script>
</html>

点击后,父类中的方法执行了,在控制台打印了子类的数据。

浏览器结果:

相关文章
|
20天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章
|
20天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
28 1
vue学习第九章(v-model)
|
20天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
33 1
vue学习第十章(组件开发)
|
26天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
13天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
24 8
|
13天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
26天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
26天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
25天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
38 3
|
25天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
51 2