Vue_组件间传值

1、父组件传值给子组件
2、子组件传值给父组件

1、父组件传值给子组件
<body>
    <template id="account">
        <div>
            <h3>组件内容:{{name1}}</h3>
        </div>
    </template>

    <div id="app">
        <!----使用组件---->
        <account :name1="name"></account>
    <div>
</body>

<script type="text/javascript">
    Vue.component("account",{
        template:"#account",
        //接收数据
        props:{
             name1:String  //接收的数据的类型       
         }
    })

    new Vue({
        el:"app",
        data:{
              name:"locdee"
        }
    })
</script>
2、子组件传值给父组件
<body>
    <template id="account">
        <div>
           <!---在子组件绑定一个事件click,发送数据--->
            <h3 @click="sendData">发送数据</h3>
        </div>
    </template>

    <div id="app">
        <!----首先,在父组件定义一个方法send---->
        <account @send="getData"></account>
    <div>
</body>

<script type="text/javascript">
    Vue.component("account",{
        template:"#account",

        methods:{
             sendData(){
                  //$emit两个参数,第一个对应父组件的函数,第二个是要发送的内容
                  this.$emit("send",123)
            }     
         }
    })

    new Vue({
        el:"app",
        data:{
              name:"locdee"
        },
        methods:{
            getData(input){
                  console.log(input)
            }
        }
    })
</script>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,245评论 1 12
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,708评论 0 13
  • Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部...
    mdiep阅读 35,549评论 3 5
  • 生命是一场遇见 就如同 你遇见了那朵美艳的火龙花 我 遇见了你 就如同 你遇见了那片醉人的晚霞 我 遇见了你 就如...
    足下阿蒙阅读 170评论 0 3
  • 你不理我,不管我,忽视我,无视我,蔑视我,却跑到别人面前发骚发浪,真让我恶心。
    清溪浅浅流阅读 277评论 0 0

友情链接更多精彩内容