1、通过props向子组件传值
这个是子组件,这里我命名为child.vue
<template>
<div>
<p>{{parentToChild}}</p>
</div>
</template>
<script>
export default {
data () {
return {
valueFromParent: ''
}
},
components: {},
props: ['parentToChild'],
mounted () {},
watch: {},
methods: {},
created () {
this.valueFromParent = this.parentToChild
}
}
</script>
父组件parent.vue,代码如下
<template>
<div>
<child :parentToChild="value1"></child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
data () {
return {
value1: '父组件的值传给子组件'
}
},
components: {child},
mounted () {},
watch: {},
methods: {}
}
</script>
我是在主组件(APP.vue)里面渲染parent组件
<template>
<div id="app">
<img src="./assets/logo.png">
<parent></parent>
</div>
</template>
<script>
import parent from '@/components/parent'
export default {
name: 'App',
components: {
storetest,
componentest,
parent
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
渲染的结果我的截图在下面显示
这里我们发现父组件里面的数据被传到子组件里面了
2、子组件向父组件传值可以使用$emit方法,官方文档上对于这个方法的解释触发当前实例上的事件。附加参数都会传给监听器回调。
子组件的代码
<template>
<button @click="incrementCounter">{{counter}}</button>
</template>
<script>
export default {
name: 'button-counter',
data () {
return {
counter: 0
}
},
methods: {
incrementCounter () {
// 利用$emit将子组件的里面的incrementCount传到外面的外面方法名字定义为increment
this.$emit('increment')
this.counter++
}
}
}
</script>
父组件代码
<template>
<div id="counter-event-example">
<p>{{ total }}</p>
<child2 v-on:increment="incrementTotal"></child2>
</div>
</template>
<script>
import child2 from '@/components/child2'
export default {
name: 'index',
components: {
child2
},
data () {
return {
total: 0
}
},
methods: {
incrementTotal () {
this.total++
}
}
}
</script>
渲染结果是
点击下面的按钮对应上面的数字也会跟着改变