Vue父组件与子组件通信

最新推荐文章于 2024-03-25 13:01:07 发布

jeffrey9595

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/jeffrey9595/article/details/101570081

版权

父组件与子组件通信

父传子 - 上到下
子传父 - 下到上

在组件的标签上面以自定义属性名 + 数据的形式（），进行数据的绑定；
在组件内部通过props进行接收（props:[‘list’]），就可以直接在template中进行数据的使用了
在子组件上通过this下面的$emit(第一个参数是自定义事件，第二个参数要传递的数据)
在子组件的组件标签上通过@自定义事件名，等于回调函数的形式进行数据的处理

下面直接上代码吧!

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父->子&&子->父</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <day-parent :list="list1"></day-parent>
    </div>

</body>
<script>
      父组件 
    Vue.component('day-parent', {
        props: ["list"],
        data() {
            return {
                childval: ""
            }
        },
        //定义模板
        template:
        `<div>
            <input type="text" :value="childval">
            <day-children :childList="list" @child="getchild"/>
         </div>`,
        //在组件的标签上面以自定义属性名 + 数据的形式（），进行数据的绑定；
        methods: {
            getchild(val) {
                console.log(`我是子组件传过来的数据${val}`)
                this.childval = val //-->把子组件拿到的参数赋值给data定义的值并绑定到input
            }
        },
    });
       子组件   
    Vue.component('day-children', {
        props: ['childList'],
        //定义模板
        template: 
        `<ul>
            <li @click="change(item)" v-for="item in childList">{{item}}</li>
        </ul>`,
        methods: {
            change(val) {
                console.log(val)
                this.$emit('child', val)//--->子组件传参给到父组件,$emit(第一个参数是自定义事件，第二个参数要传递的数据)
            }
        },
    });
    const vm = new Vue({
        el: '#app',//--->挂载点
        data: {
            list1: ["React", "Angular", "Vue"],//--->子组件渲染的数据
        }
    });
</script>

</html>

持续更新中…

jeffrey9595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue父组件与子组件通信

父组件与子组件通信父传子 - 上到下子传父 - 下到上在组件的标签上面以自定义属性名 + 数据的形式（），进行数据的绑定；在组件内部通过props进行接收（props:[‘list’]），就可以直接在template中进行数据的使用了在子组件上通过this下面的$emit(第一个参数是自定义事件，第二个参数要传递的数据)在子组件的组件标签上通过@自定义事件名，等于回调函数的形式进行数...
复制链接

扫一扫