vue父子组件通信
为了方便理解和加深父子组件通信,简单写了个小demo
一、组件目录结构
- parent.vue
- son.vue
操作步骤如下:
1.父组件向子组件传值
import son from "./components/son";
1.2 在父组件的components中注册该子组件
components: {
son
}
1.3 在父组件的template中使用子组件
<son></son>
1.4 将需要传递给子组件的值通过v-bind(如果传递的是固定值,则不需要v-bind,直接属性名,属性值传递即可)。
<div class="parent">我是父组件</div>
<son :price="jiage"></son>
// 此处的jiage则是传递给子组件的值
<script>
// 第一步
import son from "./components/son";
export default {
name: '',
components: {
// 第二步
son