Vue의 상위 구성요소와 하위 구성요소 간의 값 전송 문제를 간략하게 분석한 기사

Vue 상위 구성 요소와 하위 구성 요소 간에 값을 전송하는 방법은 무엇입니까? 다음 기사에서는 Vue의 상위 구성 요소와 하위 구성 요소의 값 전송 문제를 안내합니다. 도움이 되기를 바랍니다.

서문: 일부 페이지에는 순수한 vue 파일만 있는 것이 아닙니다. Vue는 컴포넌트 개발에 주의를 기울이지만 일반적으로 대화형 이벤트가 발생하므로 오늘 이 값을 기록하겠습니다.

1. 상위 구성 요소는 하위 구성 요소에 값을 전달합니다.

상위 구성 요소는 Prop을 사용하여 하위 구성 요소에 값을 전달합니다. 일반적으로 아래와 같이 하위 구성 요소에 관련 선언을 해야 합니다.

하위 구성 요소는 HellowWorld.vue

<script>export default {
  name: &#39;HelloWorld&#39;,
  //接收的变量
  props: {
  //声明相关的类型
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
  }}</script>

상위 구성 요소 App.vue에서

<template>
  <div>
    <!-- msg为字符串类型，count为数字，options为数组 -->
    <helloworld></helloworld>
  </div></template><script>//引入组件import HelloWorld from &#39;./components/HelloWorld.vue&#39;export default {
  name: &#39;App&#39;,
  components: {
    HelloWorld  },
  data(){
    return{
      count:0,
      options:[],
    }
  },
  methods:{
  }}</script>

페이지에 미치는 영향은 다음과 같습니다.

물론 다음과 같은 동적 데이터 상호 작용을 위한 일부 이벤트를 작성할 수도 있습니다. ：

2. 하위 구성 요소가 값을 상위 구성 요소에 전달합니다.

$emit는 하위 구성 요소가 값을 전달할 때 사용됩니다. 상위 구성 요소와 동일합니다. 청취 메서드의 이름은 동일합니다(예제에서는 listeningToChild). [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]

Helloworld.vue 하위 구성 요소:

<template>
  <div>
    <!-- 文字信息 -->
    <h1>{{ msg }}</h1>
    <!-- 数字信息 -->
    <h2>{{count}}</h2>
    <!-- 渲染数组信息 -->
    <ul>
      <li>{{item}}</li>
    </ul>
    <!-- 进行传值 -->
    <button>点击</button>
  </div></template><script>export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
    SendMsg(){
      // listenToChild  注意
      this.$emit(&#39;listenToChild&#39;,this.options)
    }
  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style>h3 {
  margin: 40px 0 0;}ul {
  list-style-type: none;
  padding: 0;}/* li {
  display: inline-block;
  margin: 0 10px;
} */a {
  color: #42b983;}</style>

App.vue 상위 구성 요소:

<template>
  <div>
    <img  alt="Vue의 상위 구성요소와 하위 구성요소 간의 값 전송 문제를 간략하게 분석한 기사" >
    <!-- listenToChild 为子组件传来的方法 -->
    <helloworld></helloworld>
    <button>+</button>
    <button>置零</button>
    <button>-</button>
    <ul>
      <li>{{index}}，{{item}}</li>
    </ul>
  </div></template><script>import HelloWorld from &#39;./components/HelloWorld.vue&#39;export default {
  name: &#39;App&#39;,
  components: {
    HelloWorld  },
  data(){
    return{
      // 要传去子组件的参数
      count:0,
      options:[],
      // 子组件传来的参数
      data:[]
    }
  },
  methods:{
    Add(){
      this.count=Number(this.count)+1
      this.options.push(&#39;添加一次，当前数值为：&#39;+this.count)
    },
    Sub(){
     
      if(this.count<=0){
        this.options.push(&#39;当前数值不能变化了&#39;+this.count)
      }else{
        this.count=Number(this.count)-1
       this.options.pop()
      }
       
    },
    show(data){
      console.log(data)
      this.data=data    },
    restart(){
      this.count=0
      this.options=[]
    }
  }}</script><style>#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;}button{
  margin: 20px;}ul {
  list-style-type: none;
  padding: 0;}</style>

효과:

(동영상 공유 알아보기: vuejs 소개 튜토리얼, 기본 프로그래밍 동영상)

위 내용은 Vue의 상위 구성요소와 하위 구성요소 간의 값 전송 문제를 간략하게 분석한 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!