码迷,mamicode.com
首页 > Web开发 > 详细

Vuejs 父子组件通信

时间:2020-03-16 20:27:49      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:net   export   dex   http   重命名   imp   传递   code   形式   

参考链接

  • 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>

Vuejs 父子组件通信

标签:net   export   dex   http   重命名   imp   传递   code   形式   

原文地址:https://www.cnblogs.com/Alex-Mercer/p/12506243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!