父子组件之间的传值

父子组件之间的传值

1.父组件给子组件传值

子组件写法

注意：子组件用props接受从父组件传过来的属性

<template>
	<div>
		<p>{{message}}</p>
	</div>
</template>
<script>
		
	export default{
		props:['message']
	}
</script>

父组件写法：

注意：父组件绑定一个动态属性

<template>
	<div id="app">
		<child v-bind:message="parentMsg"></child>
	</div>
</template>
<script>
	import child from './components/Child';	
	export default{
		name:"app",
		data(){
            return {
				parentMsg:"hello"
            }
		},
		components:{
			child
		}
	}
</script>

总结：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

2.子组件给父组件传值

使用ref属性

子组件写法：

<template>
	<div>
		<p>{{message}}</p>
	</div>
</template>
<script>
	export default{
		data(){
            return {
                message:"hello"
            }
        }
	}
</script>

父组件写法:

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>

总结：

• 在父组件引入子组件标签时用ref进行标识
• 在获取子组件的值时用this.$refs来获取