prop 父组件向子组件传递数据, 单向绑定
$refs 父组件调用子组件里的属性和方法
$emit 子组件向父组件传递消息
新建项目
$ vue create demo
$ cd demo
$ npm run serve
1、父组件引用子组件
components/Child.vue
<template>
<h2>子组件</h2>
</template>
App.vue
<template>
<div id="app">
<h2>父组件</h2>
<!-- 3、使用子组件 -->
<Child></Child>
</div>
</template>
<script>
// 1、导入子组件
import Child from "@/components/Child.vue";
export default {
name: "app",
// 2、注册组件
components: {
Child // 键名与变量名相同， 等价于 Child: Child
}
};
</script>
2、父组件给子组件传值
components/Child.vue
<template>
<div>
<h2>子组件</h2>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: "child",
// 子组件属性，用于接收父组件数据, props是单向绑定
props:[
"message"
]
}
</script>
App.vue
<template>
<div id="app">
<h2>父组件</h2>
<!-- 父组件通过属性给子组件传值 -->
<!-- 静态绑定-->
<Child message="hello"></Child>
<!-- 动态绑定 -->
<Child v-bind:message="message"></Child>
</div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
name: "app",
data() {
return {
message: "hello child"
};
},
components: {
Child
}
};
</script>
3、父组件操作子组件数据，方法
components/Child.vue
<template>
<div>
<h2>子组件</h2>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: "child",
// 子组件属性
data(){
return {
message: "",
}
},
// 子组件方法
methods:{
setMessage(msg){
this.message = msg;
}
}
}
</script>
App.vue
<template>
<div id="app">
<h2>父组件</h2>
<!-- 注册子组件引用信息 -->
<Child ref="child"></Child>
<button @click="setChildMessage">修改子组件数据</button>
<button @click="callChildMessage">调用子组件方法</button>
</div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
name: "app",
components: {
Child
},
methods: {
setChildMessage() {
this.$refs.child.message = "设置子组件属性"
},
callChildMessage(){
this.$refs.child.setMessage("调用子组件方法");
}
}
};
</script>
$refs 不是响应式的，只在组件渲染完成后才填充
4、子组件给父组件传值
components/Child.vue
<template>
<div>
<h2>子组件</h2>
<!-- 点击按钮将会给父组件传值 -->
<button @click="clickButton">子组件按钮</button>
</div>
</template>
<script>
export default {
name: "child",
methods: {
clickButton() {
// 向父组件发送信号 vm.$emit(event, args)
this.$emit("clickButton", "子组件的按钮被点击");
}
}
};
</script>
App.vue
<template>
<div id="app">
<h2>父组件</h2>
<!-- 处理子组件的按钮点击事件 -->
<Child @clickButton="childClickButton"></Child>
</div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
name: "app",
components: {
Child
},
methods: {
// 接收处理子组件传递过来的数据
childClickButton(message) {
console.log(message);
}
}
};
</script>
参考：
