Artikel yang menganalisis secara ringkas masalah pemindahan nilai antara komponen induk dan anak dalam Vue

Bagaimana untuk memindahkan nilai antara komponen induk dan anak Vue? Artikel berikut akan membawa anda melalui isu pemindahan nilai komponen induk dan subkomponen dalam Vue. Saya harap ia akan membantu anda!

Prakata: Dalam sesetengah halaman, terdapat bukan sahaja fail vue tulen yang memberi perhatian kepada pembangunan komponen, tetapi secara amnya acara interaktif pasti akan berlaku hari ini Nilai lulus, dengan ini merekodkannya.

1 Komponen induk menghantar nilai kepada komponen anak

Komponen induk menghantar nilai kepada komponen anak menggunakan: Prop, secara amnya kita perlu membuat pengisytiharan yang berkaitan dalam sub-komponen, seperti yang ditunjukkan di bawah:

sub-komponen ialah HellowWorld.vue

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

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

dalam

<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>

dalam komponen induk App.vue, maka kesan pada halaman ialah:

Sudah tentu kita juga boleh menulis beberapa peristiwa Untuk melakukan interaksi data dinamik, contohnya:

2. Komponen anak menghantar nilai kepada komponen induk

$emit digunakan apabila menghantar nilai kepada subkomponen Perlu diingat bahawa kaedah yang digunakan apabila menghantar nilai kepada subkomponen mesti mempunyai nama yang sama dengan kaedah yang didengar dalam komponen induk, iaitu listenToChild dalam. contoh. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Subkomponen 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>

Komponen induk App.vue:

<template>
  <div>
    <img  alt="Artikel yang menganalisis secara ringkas masalah pemindahan nilai antara komponen induk dan anak dalam 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>

Kesan:

(Perkongsian video pembelajaran: Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Artikel yang menganalisis secara ringkas masalah pemindahan nilai antara komponen induk dan anak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!