Vue에서 부모와 자식 구성 요소 간 통신 방법에 대한 간략한 분석(아버지에서 아들로 전달|아들에서 아버지로 전달)-View.js-php.cn

Vue에서 상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까? 다음 기사에서는 아버지와 아들, 아들과 아버지의 방법을 소개하겠습니다.

Vue에서 부모와 자식 구성 요소 간 통신 방법에 대한 간략한 분석(아버지에서 아들로 전달|아들에서 아버지로 전달)

1. 상위 구성 요소가 하위 구성 요소로 전달됩니다.

⭐⭐

상위 구성 요소가 하위 구성 요소로 전달됩니다: props 속성을 통해 [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트; -end development ]
하위 구성 요소가 상위 구성 요소에 전달됩니다. $emit을 통해 이벤트를 트리거합니다.

여기서는 상위 구성 요소에 하위 구성 요소가 표시해야 하는 일부 데이터가 있음을 알 수 있습니다. 그런 다음 props를 전달하여 구성 요소 간 통신을 완료합니다props来完成组件之间的通信

通过props来完成组件之间的通信

Vue에서 부모와 자식 구성 요소 간 통신 방법에 대한 간략한 분석(아버지에서 아들로 전달|아들에서 아버지로 전달)

2、浅谈Props

⭐⭐
那么什么是Props呢？

作用：接受父组件传递过来的属性
Props是你可以在组件上注册一些自定义的attribute（属性）；
父组件给这些attribute（属性）赋值，子组件通过attribute的名称获取到对应的值；

在使用 script setup的单文件组件中，props 可以使用 defineProps() 宏来声明：

<script>
const props = defineProps([&#39;foo&#39;])

console.log(props.foo)
</script>

로그인 후 복사

1）数组类型

在没有使用 script setup 的组件中，prop 可以使用 props 选项来声明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

로그인 후 복사

例子，对象语法的使用

App.vue里面使用组件，属性整数props所定义的

<template>
	<show-info></show-info>
</template>

로그인 후 복사

showInfo.vue子组件

 export default {
        props:{
            name :{
                type:String,
                default:"我是默认值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

로그인 후 복사

另外：
那么type的类型都可以是哪些呢？

String
Number
Boolean
Array
Object
Date
Function
Symbol

2）对象类型

用对象的形式声明props（这个还挺常用的）

使用 script setup

defineProps({
  title: String,
  likes: Number
})

로그인 후 복사

非 script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

로그인 후 복사

3、子组件传递给父组件

⭐⭐
子组件传递给父组件通过$emit触发事件

Vue에서 부모와 자식 구성 요소 간 통신 방법에 대한 간략한 분석(아버지에서 아들로 전달|아들에서 아버지로 전달)

子组件传递内容到父组件：

当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；
子组件有一些内容想要传递给父组件的时候；

$emit(“add”, count)
第一个参数自定义的事件名称，第二个参数是传递的参数

⭐⭐
举一个计数器案例

这里我们有两个子组件，一个父组件
子组件中定义好在某些情况下触发的事件名称
在父组件中以v-on（语法糖@）的方式传入要监听的事件名称，并且绑定到对应的方法中；
最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件

1）父组件App.vue

父组件监听子组件加或减的事件，通过子组件发生事件给父组件监听
父组件监听子组件发出的自定义事件，然后执行相应的操作

<template>
    <div>
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
   <add-counter></add-counter>  
   <!-- 2.自定义su-counter组件，监听内部的sub事件 -->
   <sub-counter></sub-counter>
   </div>
</template>
<script>
import AddCounter from &#39;./AddCounter.vue&#39;
import SubCounter from &#39;./SubCounter.vue&#39;
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

로그인 후 복사

2）子组件1AddCounter.vue

这里定义的是计数器的加操作
子组件事件触发之后，通过this.$emit的方式进行发出事件

<template>
    <div>
        <button>+1</button>
        <button>+5</button>
        <button>+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 让子组件发出去一个自定义事件
                // 第一个参数自定义的事件名称，第二个参数是传递的参数
                this.$emit("add",count)
            }
        }
    }
</script>

로그인 후 복사

3）子组件2SubCounter.vue

这里定义的是计数器的减操作

子组件事件触发之后，通过this.$emit

props를 통해 구성 요소 간 통신을 완료하려면

여기에 그림 설명 삽입

🎜🎜2. Props에 대한 간략한 토론🎜🎜🎜🎜⭐⭐🎜 그렇다면 Props는 무엇인가요? 🎜🎜🎜기능: 상위 구성 요소가 전달한 속성을 수락합니다.🎜🎜Props를 사용하면 구성 요소에 일부 사용자 정의 속성(속성)을 등록할 수 있습니다. 🎜🎜상위 구성 요소는 이러한 속성에 값을 할당합니다. 속성), 하위 구성 요소는 속성 이름을 통해 해당 값을 얻습니다. 🎜🎜🎜 스크립트 설정을 사용하는 단일 파일 구성 요소에서 props는 를 사용할 수 있습니다. >defineProps() code> 선언할 매크로: 🎜

<template>
    <div>
        <button>-1</button>
        <button>-5</button>
        <button>-10</button>
    </div>
</template>
<script>
    export default {
        // 1.emits数组语法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>

로그인 후 복사

🎜🎜1) 배열 유형 🎜🎜🎜 스크립트 설정을 사용하지 않는 구성 요소에서는 prop를 사용할 수 있습니다. props 옵션을 사용하여 선언: 🎜rrreee🎜예, 객체 구문 사용🎜

App.vue

showInfo.vue

props

스크립트 설정