Vue CLI 引入组件

Vue_CLI

调用外部组件

引用组件

<template>
  <div>
    <p>引入外部组件</p>
    <test />  <!-- 2、使用组件 -->
  </div>
</template>
<script>
  import test from "./module.vue";  // 1、引入组件
  export default{
    components:{
      test  // 2、注册组件
      // test:test // es5写法， 前一个test指标签命名，后一个指引入组件命名
    }
  }
</script>
<style scoped>
  p{
    margin-top: 50px;
    font-size: 24px;
    font-weight: 700;
  }
</style>

module.vue

<template>
  <div class="main">
    组件内容
  </div>
</template>
<style scoped>
  .main{
    width: 500px;
    height: 150px;
    line-height: 150px;
    margin: 50px auto;
    font-size: 18px;
    border: 1px solid #eee;
    background-color: pink;
    color: #fff;
  }
</style>

组件数据传递 props

注意：

1、属性命名为from-here时，模板要使用小驼峰式写法调用及引用，所以建立少用`-`
2、如需向组件中传递data中的数据，那么我们在绑定时，使用`v-bind:here1="message"` 或 `:here1="message"`

引用组件

<template>
  <div class="main">
    <p>组件数据传递</p>
    <test  here="China" from-here="中国" :here1="message" />  <!-- 2、使用组件 -->
  </div>
</template>
<script>
  import test from "./module.vue";  // 1、引入组件
  export default{
    data(){
      return {
        message: '浙江'
      }
    },
    components:{
      test  // 2、注册组件
    }
  }
</script>
<style>
  .main{
    padding: 50px;
    text-align: left;
  }
  .main > p{
    font-weight: 700;
    font-size: 18px;
  }
</style>

module.vue

<template>
  <div>
    <p>写法一：panda 来自 {{here}}</p>
    <p>写法二：我来自{{fromHere}} </p>
    <p>写法二：我来自{{here1}}</p>
  </div>
</template>
<script>
  export default{
    props: ['here','fromHere','here1']
  }
</script>

子组件向父组件传递数据 $emit

引用组件

<template>
  <div class="main">
    <p>子组件向父组件传递数据</p>
    <test  v-on:getMsg="childInfo" />  <!-- 2、使用组件，定义接收数据方法 -->
    <div>展示父组件获取子组件内容： {{info}}</div>
  </div>
</template>
<script>
  import test from "./module.vue";  // 1、引入组件
  export default{
    components:{
      test  // 2、注册组件
    },
    data(){
      return{
        info: ''
      }
    },
    methods:{
      // 接收子组件数据
      childInfo(val){
        this.info = val;    // www
      }
    },
  }
</script>
<style>
  .main{
    padding: 50px;
    text-align: left;
  }
  .main > p{
    font-weight: 700;
    font-size: 18px;
  }
</style>

module.vue

<template>
  <div>
    子组件内容： {{msg}}
    <button @click="change">点击向父组件传值（$emit）</button>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        msg:"www"
      }
    },
    methods:{
      change(){
        this.$emit("getMsg", this.msg);  // 向父组件传递数据
      }
    }
  }
</script>
<style scoped>
  div{
    margin: 30px 0px;
  }
</style>

效果图

动态绑定我们的组件，根据数据的不同更换不同的组件

引用组件

<template>
  <div class="main">
    <p>子组件向父组件传递数据</p>
    <component :is="who"></component>   <!-- 3、使用component标签，根据who的值不同，调用不同的组件 -->
    <button @click="change">更换component组件内容</button>   <!-- 4、给页面加个按钮，更换组件 -->
  </div>
</template>
<script>
  // 1、引入组件
  import test1 from "./module1.vue";
  import test2 from "./module2.vue";
  import test3 from "./module3.vue";
  export default{
    // 2、注册组件
    components:{
      test1,
      test2,
      test3
    },
    data(){
      return{
        who: 'test1'
      }
    },
    methods:{
      change(){
        if(this.who == "test1"){
          this.who = "test2"
        }else if(this.who == "test2"){
          this.who = "test3"
        }else{
          this.who = "test1"
        }
      }
    },
  }
</script>
<style>
  .main{
    padding: 50px;
    text-align: left;
  }
  .main > p{
    font-weight: 700;
    font-size: 18px;
  }
  div{
    margin: 30px 0px;
  }
</style>

module1.vue

<template>
  <div>
    module1内容
  </div>
</template>

module2.vue

<template>
  <div>
    module2内容
  </div>
</template>

module3.vue

<template>
  <div>
    module3内容
  </div>
</template>