Quels sont les moyens de transmettre des valeurs dans Vue ? Introduction aux méthodes de transmission de valeurs couramment utilisées dans Vue (3 types)-js tutoriel-php.cn

Quels sont les moyens de transmettre des valeurs dans Vue ? Introduction aux méthodes de transmission de valeurs couramment utilisées dans Vue (3 types)

不言

Libérer： 2018-08-23 16:46:17

original

3800 Les gens l'ont consulté

Ce que cet article vous apporte, c'est quelles sont les méthodes de transfert de valeur de Vue ? Une introduction aux méthodes de transmission de valeurs couramment utilisées dans Vue (3 types) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1. Le composant parent transmet la valeur au composant enfant
1. Utilisez des accessoires pour établir des canaux de données

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

Copier après la connexion

2. Les données transmises via les accessoires dans les composants enfants

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

Copier après la connexion

2. > 1. Un événement de clic dans le composant enfant doit déclencher un événement personnalisé

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

Copier après la connexion

2. La balise enfant dans le composant parent écoute l'événement personnalisé et obtient la valeur transmise

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;
})

Copier après la connexion

3. Les composants non parent-enfant transmettent des valeurs Parfois, deux composants doivent également transmettre des valeurs (relation non parent-enfant), nous avons donc besoin d'une vue commune pour transmettre des valeurs et obtenir la valeur
1 Créez une vue vide

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

Copier après la connexion

2 Dans le composant 1, définissez $emit pour envoyer des données

bus.$emit(&#39;test&#39;,&#39;数据&#39;)

Copier après la connexion

3. Utilisez dans le composant 2 $on pour recevoir les données transmises

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

Copier après la connexion

Bien sûr, il existe plusieurs façons de transmettre des valeurs non parent-enfant. Nous pouvons également utiliser le stockage local pour transmettre et obtenir. valeurs

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

Copier après la connexion

Recommandations associées :

Comment transmettre des valeurs entre les composants de vue

Comment vue obtient le élément actuellement cliqué et transmet la valeur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!