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>渲染结果是 点击下面的按钮对应上面的数字也会跟着改变
