vue的传值方式有哪些?vue中常用的传值方式介绍(3种)

不言
Lepaskan: 2018-08-23 16:46:17
asal
3773 orang telah melayarinya

本篇文章给大家带来的内容是关于vue的传值方式有哪些?vue中常用的传值方式介绍(3种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一. 父组件向子组件传值
    1. 使用props建立数据通道的渠道

       // 这是父组件 
      <div id="app">
          // 这是子组件 
          <child message="hello" ></child>
      </div>
Salin selepas log masuk

2 . 在子组件中通过props传递过来的数据

 Vue,component(&#39;child&#39;,{
     props:[&#39;message&#39;]
 })
Salin selepas log masuk

二. 子组件向父组件传值
1. 子组件中需要一个点击事件触发一个自定义事件

Vue.component(&#39;child&#39;,{
    methods:{
        handleClick(){
        // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
            this.$emit(&#39;parentClick&#39;,123)
        }
    },
    template:`        <div>
            <h1>这是子组件</h1>
            <button @click="handleClick" >
                发送给父组件            </button>
        </div>
    `
})
Salin selepas log masuk

2.在父组件中的子标签监听该自定义事件得到传递的值

Vue.component(&#39;parent&#39;, {
    data() {
        return {
            msg: &#39;我是子组件&#39;
        }
    },
    methods: {
        receiveMsg(value) {
            console.log(value)
            this.msg = value
        }
    },
    template:&#39;        <div>
            <h1>这是子组件</h1>
            <p>接收子组件传过来的值{{msg}}</p>
            <child @parentClick=&#39;receiveMsg&#39;></child>
        </div>
    &#39;
})
Salin selepas log masuk

三. 非父子组件传值
有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值
1 . 创建一个空的vue

  // 创建一个空的公共的vue对象
    var bus = new Vue();
Salin selepas log masuk

2 . 在组件1中,定义$emit来发送数据

bus.$emit(&#39;test&#39;,&#39;数据&#39;)
Salin selepas log masuk

3 . 在组件2中使用$on来接收传递的数据

bus.$on(&#39;test&#39;, function(num) {
     this.msg= num;       //事件的解绑问题 
        bus.$off("test")
 })
Salin selepas log masuk

当然非父子传值的方法不只有一种我们也可以使用 localstorage 来传值和取值

// 在第一个组件中 setItem 设置值local
storage.setItem(&#39;test&#39;,&#39;数据&#39;)
// 在第二个组件中 getItem 获取值local
Storage.getItem("test");
Salin selepas log masuk

相关推荐:

vue组件之间的传值方式

vue如何获取当前点击的元素并传值

Atas ialah kandungan terperinci vue的传值方式有哪些?vue中常用的传值方式介绍(3种). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!