Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

父组件传子组件

子组件

定义从父组件传过来的参数。

<!--儿子组件-->

<template>
  <h1>这是儿子组件</h1>
  <h4>{{arr}}</h4>
  <h4>{{num}}</h4>
  <h4>{{str}}</h4>
  <h4>{{str2}}</h4>
  <h4>{{obj}}</h4>
  <h4>{{func}}</h4>
</template>

<script>
export default {
  name: "son",
  props:{//props列表
    arr: Array,//定义参数类型
    num: Number,
    str: String,
    str2:{
      type:String,
      default:"我是默认字符串"//定义参数默认值
    },
    obj:{
      type: Object,
      required:false //定义参数是否必须值
    },
    func:{
      type:Function,
      required:false//定义参数是否必须值
    }
  }
}
</script>

<style scoped>

</style>

父组件

根据子组件进行参参数。

<!--父亲组件-->

<template>
  <div>
    <h1>这是父节点</h1> <!-- 绑定数据 -->
    <son
        v-bind:arr="testarr" 
        v-bind:num="testnum"
        v-bind:str="teststr"
        v-bind:obj="testobj"
        v-bind:func="testfunc">
    </son>
  </div>
</template>

<script>
import son from '@/views/son'

export default {
  name: "father",
  data() {
    return {
      testarr:[1,2,3],
      testnum: 23,
      teststr: 'loong',
      testobj:{
        name: 'lee',
        age: 23
      },
      testfunc: this.testfunc
    }
  },
  methods:{
    testfunc(){
      console.log("测试函数!")
    }
  }
  ,
  components:{
    son
  }
}
</script>

<style scoped>

</style>

子组件传父组件

父组件在组件上定义了一个自定义事件，事件名是用于接受子组件传过来的值。

在子组件中创建一个按钮，给按钮绑定一个点击事件。在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。

子组件

<template>
  <h1>这是儿子组件</h1>
  <button v-on:click="toFa">向父组件传值</button>
</template>

<script>
export default {
  name: "son",
  methods:{
    toFa(){
      this.$emit("getmsg","这是一个从子组件传过来的信息");
    }
  }
}
</script>

<style scoped>

</style>

toFa 只是子组件中的触发事件函数，$emit 中的getmsg 需要在父组件中进行绑定，后面是传入的信息。

父组件

<template>
  <div>
    <h1>这是父节点</h1>
    <son v-on:getmsg="getData"></son>
    <h3>{{msg}}</h3>
  </div>
</template>

<script>
import son from '@/views/son'

export default {
  name: "father",
  data() {
    return {
      msg: ''
    }
  },
  methods:{
    getData(data){
      this.msg = data
    }
  }
  ,
  components:{
    son
  }
}
</script>

<style scoped>

</style>

getData 是一个函数，会接受传过来的信息。而 getmsg 是子组件中定义的，进行连通绑定的。

还需要注意的是，点按钮的时候是点击访问父组件中的，而不是点击直接访问子组件中的。

组件传参

这是在新建的Vue项目中，官方使用的一种。

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld age="23" msg="Welcome to Your Vue.js App"/>
  </div>
</template>

子组件

<h1>{{ msg }}</h1>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    age: String    
  }
}
</script>

字符串转数字

parseInt()
parseFloat()