Vuejs 父子组件通信

Posted 2020-11-26 Alex_Mercer

参考链接

• https://www.jb51.net/article/143049.htm

父组件传递子组件

props 是单向绑定的 。当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态。
如果prop在父子组件的属性名定义一样，可以直接 :属性

子组件代码

<template>
   <div>
    <h2>购物车</h2>
    <p>id:{{id}}</p>
    <p>name:{{name}}</p>
    </div>
</template>
<script>
    export default {
        name: "cart",
        // props:{
        //     id:String,
        //     name:String
        // }
        props:['id','name']  //两种形式，第一种可以定义数据类型
    }
</script>

父组件代码

1.import 导入子组件
2.components 注册子组件。//可以 重命名。 cart22：cart
3.通过v-bind 动态传递参数给子组件。//data传递参数直接在""中间写参数名，不是的则在"‘‘"单引号中间写

<template>
  <div>
    <h2>首页</h2>

 <h2>子组件</h2>
    <cart :id="'a'" :name="'b'"></cart>
  </div>
</template>
<script>
import cart from '@/views/backEnd/cart'
export default {
  name: "index",
  components:{
      cart
  },
//   data(){
//       return{
//           a:"asd",
//           b:"zxc",
//       }
//   }
};
</script>