Heim > Web-Frontend > View.js > Hauptteil

Ein Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiert

青灯夜游
Freigeben: 2023-02-23 19:33:27
nach vorne
1981 Leute haben es durchsucht

Wie übertrage ich Werte zwischen übergeordneten und untergeordneten Vue-Komponenten? Der folgende Artikel führt Sie durch die Werteübertragungsprobleme von übergeordneten und untergeordneten Komponenten in Vue. Ich hoffe, er ist hilfreich für Sie!

Ein Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiert

Vorwort: Auf einigen Seiten achtet Vue nicht nur auf die Komponentenentwicklung, sondern im Allgemeinen wird es heute definitiv zu interaktiven Ereignissen kommen, daher werde ich es hier aufzeichnen.

1. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente mit: Prop

Im Allgemeinen müssen wir relevante Deklarationen in der untergeordneten Komponente vornehmen, wie unten gezeigt:

Die untergeordnete Komponente ist

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

    }
  },
  methods:{
  }}</script>
Nach dem Login kopieren
HellowWorld.vueIn der übergeordneten Komponente 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>
Nach dem Login kopieren
Dann ist der Effekt auf der Seite:


Natürlich können wir auch einige Ereignisse für die dynamische Dateninteraktion schreiben, z :Ein Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiert

Ein Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiert

2. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente. $emit wird verwendet, wenn die untergeordnete Komponente einen Wert übergibt. Die Methode muss dieselbe sein wie die der übergeordneten Komponente. Die Listening-Methode hat denselben Namen, im Beispiel listenToChild. [Verwandte Empfehlungen: vuejs-Video-Tutorial

,

Web-Frontend-Entwicklung]Helloworld.vue-Unterkomponente:

<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>
Nach dem Login kopieren
App.vue-Übergeordnete Komponente:

<template>
  <div>
    <img  alt="Ein Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiert" >
    <!-- 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>
Nach dem Login kopieren
Effekt:


(Lernvideo-Sharing: Ein Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiertvuejs-Einführungs-Tutorial

,

Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonEin Artikel, der kurz das Problem der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten in Vue analysiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage