一、传值
1、父传子：通过props属性
特点：（单向数据流，且只读）
如果尝试直接修改，会报错如下图：
如需将该值当作初始值使用，后续需要修改则可以使用data或者computed属性进行修改，或者是利用watch监听变化修改。
当作初始值使用
静态/动态传递
父组件通过v-on添加一个自定义属性，将该属性传递给子组件，子组件通过props属性接收到该自定义属性 例子： 父组件：app.vue：
<template>
<div id="app">
<Test weather="晴天" :day="today" :time="time" :list="list"/>
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: 'app',
components: {
Test
},
data(){
return{
today: '星期四',
time: '21:55',
list: [{
id: 1,
age: '6'
}, {
id: 2,
age: '7'
},{
id: 3,
age: '8'
}]
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
子组件：Test.vue
<template>
<div class="Test">
<h2>{{ msg }}</h2>
<h3>今天天气是：{{ weather }}</h3>
<h4>今天是{{ day }}</h4>
<h5>现在时间是：{{ time }}</h5>
<ul>
<li v-for="item in list">{{ item.id }}号：今年{{ item.age }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Test',
props: ['day','time','weather','list'],
data(){
return {
msg: '子组件'
}
}
}
</script>
<style scoped>
li{
list-style: none;
}
</style>
结果如图：
2、子传父：通过自定义事件$emit
子组件通过$emit绑定一个自定义事件，将该事件附带的参数传递给父组件，父组件通过v-on监听该事件并接收传递过来的参数信息 例子： 父组件：app.vue：
<template>
<div id="app">
<Test :age='age' @patch="fn1" @dis="fn2"/>
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: 'app',
components: {
Test
},
data(){
return{
age: 6
}
},
methods:{
fn1: function(a){
this.age++
console.log(a)
},
fn2: function(b){
this.age--
console.log(b)
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
子组件：Test.vue
<template>
<div class="Test">
<h1>{{ msg }}</h1>
<h2>年龄：{{ age }}岁</h2>
<button @click="$emit('patch',66)">年龄增长</button>
<button @click="$emit('dis',['a', 'b', 'c'])">年龄减小</button>
</div>
</template>
<script>
export default {
name: 'Test',
props: ['age'],
data(){
return {
msg: '子组件'
}
}
}
</script>
<style scoped>
li{
list-style: none;
}
</style>
结果如图：
点击左按钮
点击右按钮
当需要从自组件获取父组件的方法，并且得到返回值的时候，可以利用props将父组件的返回值从父组件发送给自组件。 例如：
路由也可以当作正常组件来传递，也可以使用props和$emit传递参数
3、跨组件间传递（不是父子间）：使用vuex
有关vuex使用可以查看文章：Vuex简单总结
二、方法调用
1. 父组件调用子组件
parent和children方法不推荐使用 一般使用refs，相当于给子组件加id的方式调用 在父组件中给子组件加ref，即可直接调用子组件的方法 子组件：
<template>
<div>子组件</div>
</template>
<script>
export default {
name: "test",
methods: {
init(){
console.log('子组件的方法调用了')
}
}
}
</script>
<style scoped>
</style>
父组件：
<template>
<Son ref="son"></Son>
</template>
<script>
export default {
name: "test",
components: {
Son: () => import('@/components/Son')
},
methods: {
test(){
this.$refs.son.init()
}
}
}
</script>
<style scoped>
</style>
1. 子组件调用父组件
同上面传值中子传父，利用$emit来调用
