Detailed explanation of vue.js data transfer and data distribution slot examples

This article mainly analyzes the relevant knowledge of vue.js data transfer and data distribution slot through code examples. Friends who are interested in this aspect can refer to it. I hope it can help everyone.

1. Data transfer between components

1. The parent component obtains the data of the child component

*The child component transfers its own data , sent to the parent

*vm.$emit(event name, data);

*v-on: @

Example usage: when the send button is clicked , "111" becomes "I am the data of the child component"

nbsp;html>


  <meta>
  <title>父级获取子级的数据</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
  </aaa>
</p>
<template>
  <span>我是父级 -> {{msg}}</span>
  //自动调用get方法，@child-msg和下面的this.$emit('child-msg',this.a)相对应
  <bbb></bbb>
</template>
<template>
  <h3 id="子组件">子组件-</h3>
  <input>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aaa&#39;,
        methods:{
          //这里的msg实际上就是子组件传递给父组件的数据
          get:function(msg){
            this.msg=msg;
          }
        },
        components:{
          &#39;bbb&#39;:{
            data:function(){
              return {
                a:&#39;我是子组件的数据&#39;
              }
            },
            template:&#39;#bbb&#39;,
            methods:{
              send:function(){
                this.$emit(&#39;child-msg&#39;,this.a);
              }
            }
          }
        }
      }
    }
  });
</script>

2. The child component obtains the data of the parent component

When calling the child component:

Within subcomponent:

props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
　　　　　　　　}

nbsp;html>


  <meta>
  <title>自己获取父级的数据</title>
  <script></script>
  <style>
  </style>


<p>
  </p><p>{{a}}</p>
  <aaa>
    {{msg}}
  </aaa>


<template>
  <h1 id="">11111</h1>
  <bbb></bbb>
</template>
<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;a&#39;
    },
    components:{
      &#39;aaa&#39;:{
        data:function(){
          return {
            msg:111,
            msg2:&#39;我是父组件的数据&#39;
          }
        },
        template:&#39;#aa&#39;,
        components:{
          &#39;bbb&#39;:{
            props:{
              &#39;mmm&#39;:String,
              &#39;myMsg&#39;:Number
            },
            template:&#39;<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}&#39;
          }
        }
      }
    }
  });

</script>

Run result:

2. Content distribution:

Vue.js provides a way to mix the content of the parent component and the template of the child component itself: slot, used to occupy a position

1. Basic usage

nbsp;html>


  <meta>
  <title>slot保留原来的位置</title>
  <script></script>
  <style>
  </style>



<p>
  <aaa>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </aaa>
  </p><hr>
  <aaa>
  </aaa>

<template>
  <h1 id="xxxx">xxxx</h1>
  <slot>这是默认的情况</slot>
  <p>welcome vue</p>
</template>

<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });

</script>

Running result: The content in the ul tag is not overwritten. If slot is not used, the content in the ul tag will be overwritten

2. The name attribute of the slot

nbsp;html>


  <meta>
  <title>slot中name属性的使用</title>
  <script></script>
  <style>
  </style>


<p>
  <aaa>
    <ul>　　　　//这里slot的名字要与下面slot中name属性相对应
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
    <ol>　　　　//用法同上
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ol>
  </aaa>
  </p><hr>
  <aaa>
  </aaa>

<template>　　
  <h1 id="xxxx">xxxx</h1>
  <slot>这是默认的情况</slot>　　　　　　//设置name属性，给slot命名
  <p>welcome vue</p>
  <slot>这是默认的情况2</slot>
</template>

<script>
  var vm=new Vue({
    el:&#39;#box&#39;,
    data:{
      a:&#39;aaa&#39;
    },
    components:{
      &#39;aaa&#39;:{
        template:&#39;#aaa&#39;
      }
    }
  });

</script>

Running results:

Related recommendations:

Vue content distribution slot

js component SlotMachine implements image switching effect to create lottery system_javascript skills

How to transfer data between vue.js components

The above is the detailed content of Detailed explanation of vue.js data transfer and data distribution slot examples. For more information, please follow other related articles on the PHP Chinese website!