vue ----组件间的通信

最新推荐文章于 2024-08-16 19:41:03 发布

淘淘桃

最新推荐文章于 2024-08-16 19:41:03 发布

阅读量373

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/xiaolisolovely/article/details/131352694

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

该文章通过两个HTML示例展示了Vue.js中组件间的通信方式。首先演示了如何从父组件向子组件传递数据，通过在子组件的模板中接收`props`并使用这些属性。然后，文章解释了子组件如何通过`$emit`触发自定义事件来向父组件传递数据，父组件则通过监听该事件来更新自身的状态。

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

1父传子

1.在子组件的标签上，定义随意的属性名，属性值为父组件要传给子组件的值

比如 <lqz :urls="url" :myshow="true"></lqz>

2.子组件要接收父组件传来的属性

props: ['urls', 'myshow'] //用于接收lqz标签的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>组件的使用</h1>
    <hr>
    <lqz :urls="url" :myshow="true"></lqz>
    <hr>
</div>


</body>
<script>
    // 2
    var lqz = {
        template: `
          <div>
          <h1>我是局部组件</h1>
          <img :src="url" alt="" height="400px">
          <button @click="handleCheck">点我看myshow类型</button>
          </div>`,
        data() {
            return {}
        },
        methods: {
            handleCheck() {
                console.log(this.myshow)
                console.log(typeof this.myshow)
            }
        },
        props: ['urls', 'myshow']    //用于接收lqz标签的属性
    }

    // 根组件
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg',

        },
        // 局部组件是定义在某个组件内,可以定义多个,只能在它父组件中使用，不能到别的地方使用
        components: {
            lqz,
        }
    })
</script>
</html>

2.子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>传递过来{{username}}</p>
<!--    @dffllflf="handEvent"，dffllflf自定义的事件 ，handEvent函数名-->
<zhu  @handls="handEvent"></zhu>
<!--    zhu 子组件定义的标签-->
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            //将url传给子组件
        },
        methods: {
            //handEvent函数是根组件的
            handEvent(username){
                this.username=username
            }
        },
        //子组件
        components: {
            'zhu': {
                data() {
                   return {
                       username:'',
                   }
                },
                template: `
                  <div>
                  <p>局部组件</p>
                  <input type="text" v-model="username">
                  <button @click="handleclick"> 传递给父组件</button>
                  </div>
                `,
                methods: {
                    handleclick(){
                        //handls属性名    触发handls代表的函数handEvent，将input输入的username传递给handEvent函数
                        this.$emit('handls',this.username)

                    }
                }
            }
        }
    })
</script>
</body>
</html>

淘淘桃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue ----组件间的通信

props: ['urls', 'myshow'] //用于接收lqz标签的属性。比如 <lqz :urls="url" :myshow="true"></lqz>1.在子组件的标签上，定义随意的属性名，属性值为父组件要传给子组件的值。2.子组件要接收父组件传来的属性。
复制链接

扫一扫

专栏目录