vue开发（二）单文件组件开发

基础

1. vue-loader
   

   一个单独的组件是一个.vue文件，由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析，所以在webpack构建中，需要安装vue-loader

var myCom = Vue.extend({    template: '<div>这是我的组件</div>'})

1. 文件结构
   
   • template
     

     都是html代码，里面可以含有变量

   • style
     scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域
   • script
     都是js代码，定义了这个组建中需要的数据和操作
     export default 后面的对象即为Vue对象，定义组件需要的数据，一级操作数据的方法等

组件通信

1. 父->子组件通信

3个地方需要对应：
- 父组件：调用子组件时，标签的参数mes-father
- 子组件：内template中数据展示mesFather
- script的export default对象，属性props:[‘mesFather’]

• >在A组件中通过import引入B组件，那么A组件就是父组件，B组件就是子组件
• >在我们这个vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签中，import Hello from ‘./components/Hello’，那么 App.vue 就是父组件，components 文件夹下的Hello.vue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。
• >父组件向子组件传值：主要是通过元素的属性进行的. 在App.vue 的template中,有一个 , 这就是我们引入的子组件. 给其添加属性如 mes-father=”message from father”; 父组件将数据传递进去,子组件需要接收才能使用.

// App.vue<template>  <div id="app">    <img src="./assets/logo.png">    <hello mes-father="message from father"></hello>  </div></template>

• >在export default的对象中，添加一个字段props，他是一个数组，专门用来接收父组件传递过来的数据. props: [“mesFather”], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应

// Hello.vue组件<template>  <div class="hello">    <p>{{mesFather}}</p>  </div></template><script>export default {  props:['mesFather']}</script>

1. 子->父组件通信

   • 子组件：某个标签内添加事件引用@keypress.enter=”enter”，enter事件需要在methods中定义，执行方法使用$emit，两个参数，一个是父组件接收的函数名称，另一个是传入父组件的参数；
     同时添加v-model数据绑定v-model=”inputValue”
     v-model中的数据需要在data中return
   • 父组件在引用子组件的标签内，引用事件（应该与子组件传给父组件的函数名一致），等于父组件methods中定义的事件名
     另外，父组件的data中应该定义一个参数用来存储方法执行后的结果，从而与视图层呼应

   • >子组件通过自定义事件向父组件传递数据。
   • >例如，我们在Hello.vue ，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。
   • >在 Hello.vue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter, 整个Hello.vue 文件如下

<template>  <div class="hello">    <!-- 添加一个input输入框 添加keypress事件-->    <input type="text" v-model="inputValue" @keypress.enter="enter">    <p>{{mesFather}}</p>  </div></template><script>export default {  props:['mesFather'],  // 添加data, 用户输入绑定到inputValue变量，从而获取用户输入  data: function () {    return {      inputValue: ''      }  },  methods: {    enter () {      this.$emit("valueUp", this.inputValue)       //子组件发射自定义事件valueUp, 并携带要传递给父组件的值，      // 如果要传递给父组件很多值，这些值要作为参数依次列出 如 this.$emit('valueUp', this.inputValue, this.mesFather);     }  }}</script>

• >在App.vue 中， template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个 p 元素，用于展示子组件传递过来的数据，

  子组件传递过来的数据 {{ childMes }}

相应地，在scrpit中，data 中，定义一个变量childMes, 并在 methods 中，定义一个事件处理函数reciever。整个App.vue修改如下：

<template>  <div id="app">    <img src="./assets/logo.png">    <!-- 添加自定义事件valueUp -->    <hello mes-father="message from father" @valueUp="recieve"></hello>    <!-- p元素，用于展示子组件传递过来的数据 -->    <p>子组件传递过来的数据 {{childMes}}</p>  </div></template><script>import Hello from './components/Hello'export default {  name: 'app',  components: {    Hello  },  // 添加data  data: function () {    return {      childMes:''    }  },  // 添加methods，自定义事件valueUp的事件处理函数recieve  methods: {    recieve: function(mes) { // recieve 事件需要设置参数，这些参数就是子组件传递过来的数据，因此，参数的个数，也要和子元素传递过来的一致。      this.childMes = mes;    }  }}</script>