Apakah kaedah untuk menghantar parameter dalam Vue?

Kaedah untuk menghantar parameter: 1. Gunakan "props" dan "$emit" untuk menghantar parameter antara komponen ibu bapa dan anak 2. Gunakan "provide" dan "inject" untuk menghantar parameter antara komponen datuk dan cucu; 3. Brothers Fail awam digunakan untuk memindahkan parameter antara komponen; 4. "query" dan "params" digunakan untuk memindahkan parameter antara laluan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3 .

Kaedah lulus parameter biasa dalam Vue

• Komunikasi komponen - panggilan kaedah dan hantaran parameter antara komponen induk dan anak dalam prop Vue, $emit

• Luluskan pertanyaan parameter dan param antara laluan

• Komponen ibu bapa-anak

1.1 Bapa kepada anak lelaki (props)

Kesan data halaman adalah seperti berikut

<!-- 父组件father.vue -->
<template>
  <div>
    <div>这里是father组件</div>
    <div>这是父组件要传给子组件的参数：{{msg}}</div>
    <!-- 1.传递：data1为动态参数msg的参数名，名字自定义，与子组件接收参数名同名
    data2为静态参数的参数名，名字自定义，与子组件接收参数名同名 -->
    <child :data1="msg" data2="777"></child>
  </div>
</template>
<script>
  import child from "./child";
  export default {
      data() {
          return {
              msg:"666"
          }
      },
    components: {
      child
    }
  };
</script>

<!-- 子组件child.vue -->
<template>
  <div>
    <div>这里是child组件</div>
    <!-- 3.使用：这里就是接收的父组件参数 -->
    <div>接受的父组件动态参数：{{ data1 }}</div>
    <div>接受的父组件静态参数：{{ data2 }}</div>
    <div>接受的父组件参数：{{ data }}</div>
  </div>
</template>
<script>
  export default {
    // 2.接收：props接收父组件参数，data1与data2为传递参数的参数名，与父组件内同名
    props: ["data1", "data2"],
    data() {
      return {
        data: "默认值"
      };
    },
    // 3.使用：直接用this调用
    mounted() {
      this.data = this.data1;
    }
  };
</script>

Sedikit perhatian harus diberikan di sini Jika parameter yang diluluskan oleh komponen induk perlu ditetapkan semasa kitaran hayat, mereka tidak boleh terikat dipasang, jika tidak anak Panggilan ini dalam kaedah komponen tidak akan berjaya. Urutan kitaran hayat: ibu bapa sebelumMount-> anak sebelumCreate... anak dipasang->

Selepas mengklik butang, pemaparan halaman adalah seperti berikut

1.3 Komponen induk memanggil komponen anak kaedah ($on)

<!-- 子组件child.vue -->
<template>
  <div>
    <div>这里是child组件</div>
    <!-- 这里就是接收的父组件参数 -->
    <input type="button" value="点击向父组件传参" @click="toFather">
  </div>
</template>
<script>
  export default {
    data(){
      return{
        cmsg:&#39;我是子组件的参数&#39;
      }
    },
    methods: {
      toFather(){
        // 1.子组件触发父组件方法
        // $emit第一个参数为所要触发的父组件函数，函数名可自定义但要与父组件中对应函数名同名
        // $emit第二个参数就是子组件向父组件传递的参数
        this.$emit(&#39;receive&#39;,this.cmsg);
      }
    },
  };
</script>
<style scoped></style>

<!-- father.vue -->
<template>
  <div>
    <div>这里是father组件</div>
    <div>接收子组件参数：{{fmsg}}</div>
    <!-- 2.在对应子组件上绑定函数，这里“receive”是函数名，可自定义但要与子组件触发函数同名 -->
    <child @receive="fromChild"></child>
  </div>
</template>
<script>
  import child from "./child";
  export default {
    data() {
      return {
        fmsg:&#39;&#39;
      };
    },
    methods: {
      // 接收子组件参数，赋值
      fromChild(data){
        this.fmsg=data;
      }
    },
    components: {
      child
    }
  };
</script>
<style scoped></style>

2. Pemindahan parameter komponen cucu (menyediakan dan menyuntik, tidak terjejas oleh tahap komponen)

dan terutamanya menyediakan kes penggunaan untuk perpustakaan pemalam/komponen mewah. Tidak disyorkan untuk digunakan secara langsung dalam kod aplikasi. Dokumentasi rasmi: https://cn.vuejs.org/v2/api/#provide-inject

https://cn.vuejs.org/v2/guide/components-edge -cases.html#Dependency injection

<!-- father.vue -->
<template>
    <div>
        <div @click="click">点击父组件</div>
        <child ref="child"></child>
    </div>
</template>

<script>
    import child from "./child";
    export default {
        methods: {
            click() {
                this.$refs.child.$emit(&#39;childMethod&#39;,&#39;发送给方法一的数据&#39;) // 方法1:触发监听事件
                this.$refs.child.callMethod() // 方法2:直接调用
            },
        },
        components: {
            child,
        }
    }
</script>

<!-- child.vue -->
<template>
    <div>子组件</div>
</template>

<script>
    export default {
        mounted() {
            this.monitoring() // 注册监听事件
        },
        methods: {
            monitoring() { // 监听事件
                this.$on(&#39;childMethod&#39;, (res) => {
                    console.log(&#39;方法1:触发监听事件监听成功&#39;)
                    console.log(res)
                })
            },
            callMethod() {
                console.log(&#39;方法2:直接调用调用成功&#39;)
            },
        }
    }
</script>

3. Parameter passing komponen adik beradik (bus.js) provideinject

3.1 Cipta bas.js

<!-- grandpa.vue -->
        data() {
            return {
                msg: &#39;A&#39;
            }
        },
        provide() {
            return {
                message: this.msg
            }
        }

<!-- father.vue -->
        components:{child},
        inject:[&#39;message&#39;],

<!-- child.vue -->
        inject: [&#39;message&#39;],
        created() {
            console.log(this.message)    // A
        },

3.2 Lulus parameter seperti komponen adik beradik

3.3 Terima Parameter komponen adik beradik

4. Pemindahan parameter antara laluan (pertanyaan dan params)

Pertanyaan dan parmas digunakan dengan cara yang hampir sama Berikut ialah pengenalan ringkas kepada konfigurasi penghalaan, pemindahan parameter dan panggilan

import Bus from "@/utils/bus";   //注意引入
    export default {
        data(){
            return {
                num:1
            }
        },
        methods: {
            handle(){
                Bus.$emit("brother", this.num++, "子组件向兄弟组件传值");
            }
        },
    }

4.1params, parameter dipaparkan dalam url

import Bus from "@/utils/bus";   //注意引入
    export default {
        data(){
            return {
                data1:'',
                data2:''
            }
        },
        mounted() {
            Bus.$on("brother", (val, val1) => {    //取 Bus.$on
                this.data1 = val;
                this.data2 = val1;
            });
        },
    }

4.2params, parameter tidak dipaparkan dalam url dan data hilang apabila memuat semula halaman

4.3pertanyaan, parameter dipaparkan dalam url

Cadangan berkaitan: "

tutorial vue.js

// router的配置
    {
      path: "/two/:id/:data",   　　// 跳转的路由后加上/:id，多个参数继续按格式添加，数据按顺序对应
      name: "two",
      component: two
    }

// 跳转,这里message为123
　　this.$router.push({
　　　　path: `/two/${this.message}/456`   　　// 直接把数据拼接在path后面
　　});
 // 接收
　　created() {
      this.msg1=this.$route.params.id    // 123
      this.msg2=this.$route.params.data　　// 456
   }

// url显示，数据显示在url，所以这种方式传递数据仅限于一些不那么重要的参数
　　/two/123/456

"

Atas ialah kandungan terperinci Apakah kaedah untuk menghantar parameter dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!