【vue】10.0 vue-cli 单文件组件

vue cli脚手架项目的实际入口

如下图所示。

image.png
在整个vue cli执行的入口main.js,通过render的方法，将一些组件渲染到html页面上。
image.png
所以#app和index.html的id=“app”是对应的，可以一并修改。

关于render

  render: h => h(App)// 渲染方法，将App渲染到#app

完全等价于

  render:function(h){
    return h(App)
}

关于import

import Vue from 'vue'

完全等价于(ES6标准导入写法)

var Vue = require("vue); //CommonJS规范

vue cli的一个优势

vue cli可以实现单文件组件，并可以进行很好的组件通信。

vue ES6标准导出

<template>
  <div>
  </div>
</template>
export default {
}

完全等价于

{}===Vue.component("App",{})

修改About.vue，实现一个单文件组件的简单功能：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    hello vue-单文件组件
    <el-input type="text" v-model="mytext" />
    <el-button @click="handleClick">点击</el-button>
    <el-col>
      <p>{{ outtext }}</p>
    </el-col>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mytext: '',
      outtext: '暂无内容'
    }
  },
  methods: {
    handleClick () {
      debugger
      if (this.mytext.length <= 0) {
        this.outtext = '暂无内容'
        return false
      }
      this.outtext = this.mytext
    }
  }
}
</script>

全局组件

在当前目录下的components目录下创建Child1.vue

<template>
  <div class="Child1">
    <h1>This is Child 1</h1>

  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {

  }
}
</script>

修改About.vue
如果想引入自定义组件，那么将如下设置，就可以设置为全局组件。

import Vue from 'vue'
import child1 from '../components/Child1'
// 如果设置成全局组件
Vue.component('child1', child1)

局部组件

<script>
import child1 from '../components/Child1'
export default {
  components: {
    child1: child1
  },
  data () {
    return {
      ************
    }
  },
  methods: {
    ************
  }
}
</script>

以上也可以写成ES6对象简写

<script>
import child1 from '../components/Child1'
export default {
  components: {
    child1
  },
  data () {
    return {
      ************
    }
  },
  methods: {
    ************
  }
}
</script>

修改About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    hello vue-单文件组件
    <el-input type="text" v-model="mytext" />
    <el-button @click="handleClick">点击</el-button>
    <el-col>
      <p>{{ outtext }}</p>
    </el-col>

    <child1 myname='来自父组件的问候'></child1>
  </div>
</template>

<script>
import child1 from '../components/Child1'
export default {
  components: {
    child1
  },
  data () {
    return {
      mytext: '',
      outtext: '暂无内容'
    }
  },
  methods: {
    handleClick () {
      debugger
      if (this.mytext.length <= 0) {
        this.outtext = '暂无内容'
        return false
      }
      this.outtext = this.mytext
    }
  }
}
</script>

同时修改componets/Child1.vue

<template>
  <div class="Child1">
    <h1>This is Child 1</h1>
    <h2>child1--{{myname}}</h2>
  </div>
</template>

<script>
export default {
  props: ['myname'],
  data () {
    return {}
  },
  methods: {}
}
</script>

image.png

再次修改componets/Child1.vue

<template>
  <div class="Child1">
    <h1>This is Child 1</h1>
    <h2>
      child1--{{ myname }}
      <slot></slot>
    </h2>
  </div>
</template>

<script>
export default {
  props: ['myname'],
  data () {
    return {}
  },
  methods: {}
}
</script>

修改About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    hello vue-单文件组件
    <el-input type="text" v-model="mytext" />
    <el-button @click="handleClick">点击</el-button>
    <el-col>
      <p>{{ outtext }}</p>
    </el-col>

    <child1 myname='来自父组件的问候'>
      <div>slot演示</div>
    </child1>
  </div>
</template>

<script>
import child1 from '../components/Child1'
export default {
  components: {
    child1
  },
  data () {
    return {
      mytext: '',
      outtext: '暂无内容'
    }
  },
  methods: {
    handleClick () {
      debugger
      if (this.mytext.length <= 0) {
        this.outtext = '暂无内容'
        return false
      }
      this.outtext = this.mytext
    }
  }
}
</script>

image.png