vue学习笔记

一：创建vue过程

1.基于命令行的方式创建vue项目

vue create project-name

创建完成后运行

npm run serve

2.基于图形化界面的方式创建vue项目

vue ui

二：vue父子组件之间传值

• 父给子传值

　　1.props

　　2.$attrs

　　3.$refs

　　4.$children

//父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" fow="home给helloworld通过attrs传的值" ref="refval"/>
  </div>
</template>


<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'





export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  mounted () {
    //this.$refs.refval.childVal = '父通过$refs给子传值'

　　this.$children[0].childVal = '父通过$children给子传值'  //子组件的顺序不保证



  }
}
</script>

//子组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>父给子传值方法二：$attrs.属性名：{{ $attrs.fow }}</p>
    {{childVal}}
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      childVal: 'helloworld初始值'
    }
  }
}
</script>

• 子组件=》父组件

　　通过自定义事件传值 $emit

//子组件
<div class="hello" @click="$emit('myclick')"></div>

//父组件
<HelloWorld @myclick="onmyclick" />
<script>
...
methods: {
    onmyclick () {
      console.log('myclick')
    }
  }
</script>

 

//brother1
this.$parent.$on('foo',handle)

//brother2
this.$parent.$emit('foo')

• 祖先和后代之间

　　由于嵌套层数过多，vue提供了provide/inject:实现祖先给后代传值

//ancestor
provide() {
  return {foo: 'foo'}      
}

//descendant
inject: ['foo']