Vue父子组件通信

最新推荐文章于 2024-07-23 21:45:00 发布

comen on彬彬

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/qq_42080467/article/details/117195047

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue父子组件通信

# 父传子

父组件通过属性的形式给子组件传递

    <div id="app">
        <!-- 父组件通过属性形式给子组件传值 -->
        <counter :num="0"></counter>
        <counter :num="1"></counter>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>

        // 定义子组件
        var counter = {
            // props 子组件接受父组件传的值
            props: ['num'],
            template : '<div>{{num}}</div>'
        }

        var vm = new Vue({
            el: '#app',
            // 注册子组件
            components:{
                counter: counter
            }
        })
    </script>

子组件接收过来的 props 是不可以修改

vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

原因是在使用组件时，传入的prop，被组件内部又做了一次修改，然后抛的异常，比如如下使用组件的代码（修改的是num属性）：

 // 定义子组件
        var counter = {
            // props 子组件接受父组件传的值
            props: ['num'],
            template : '<div @click="addNum">{{num}}</div>',
            methods: {
                // 如果我们直接对 父组件传来对 num 直接修改会报错
                addNum(){
                    this.num++;
                }
            },
        }

解决方法需要在子组件 data定义一个属性克隆父组件传来的值

// 定义子组件
        var counter = {
            // props 子组件接受父组件传的值
            props: ['num'],
            // 将 父组件 num换子组件克隆对 newNum
            template : '<div @click="addNum">{{newNum}}</div>',
            data(){
                return {
                    // 克隆父组件传来对 num
                    newNum: this.num
                }
            },
            methods: {
                // 如果我们直接对 父组件传来对 num 直接修改会报错
                addNum(){
                    this.newNum++;
                }
            },
        }

# 子传父

子组件跟父组件传值通过事件的形式

子组件发送： this.$emit(发送方法,数据)

父组件接收：<子组件 @发送方法="接收方法"> </子组件>

<!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">
    <title>子传父</title>
</head>
<body>
    <div id="app">
        <!-- 父组件接收子组件 -->
        <son @change='sonName'></son>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        // 定义子组件
        var son = {
            // 定义按钮触发 子组件给 父组件传值事件
            template: '<button @click="hanleMyName">发送给父组件</button>',
            data(){
                return {
                    name: 'fubinbin'
                }
            },
            methods: {
                hanleMyName(){
                    // 子组件通过事件给父组件传值
                    // 参数1 事件名称（自定义）
                    // 参数2 传递的内容
                    this.$emit('change',this.name)
                }
            },
        }

        var vm = new Vue({
            el:'#app',
            // 注册子组件
            components:{
                son: son
            },
            methods: {
                // 接收子组件传来的值
                sonName(value){
                    console.log(value)
                }
            },
            
        })
    </script>
</body>
</html>

comen on彬彬

关注

0
点赞
踩
0

收藏

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

Vue父子组件通信# 父传子父组件通过属性的形式给子组件传递 <div id="app">  <counter :num="0"></counter> <counter :num="1"></counter> </div> <script src="https://cdn.jsdeli.
复制链接

扫一扫