Vue组件化--父组件传值给子组件

父组件传值给子组件:

• 属性props

// child
<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		{{foo}}
	</div>
</template>

<script>
	export default {
		propd: { msg: String },
		data () {
			foo: 'foo'
		}
	}
</script>


// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>

• 引用refs

// parent
<template>
	<div class="home">
		<HelloWorld ref="hw"/>
	</div>
</template>

<script>
	export default {
		// 在created中父组件先于子组件创建， 所有这时候去访问hw是得不到的
        created () {
        	console.log(this.$refs.hw)
        },
		mounted () {
			this.$refs.hw.foo = 'foo'
			console.log(this.$refs.hw)
			// 或者
			this.$children[0].foo = 'dong' // 自定义元素子元素会放在children中
			console.log(this.$children) // 官方文档有说明子元素不保证顺序
		}
	}
</script>