vue组件之间的数据传递

最新推荐文章于 2023-05-31 19:52:13 发布

直视~

最新推荐文章于 2023-05-31 19:52:13 发布

阅读量420

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/L13169126919/article/details/108044894

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组件之间的数据传递</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
            
        <!-- props传值 -->
        <my-parent name="title"></my-parent>
         <!--$emit传值 -->
        <parent></parent>  

    </div>
    <template id="child">

        <div>
            <button @click="childClick">Send</button>
            <input type="text" v-model="message"/>
        </div>

    </template>

    <script>

        // 组件注册格式  ->  Vue.component('my-component-name',{/* --- */})
       
        // props传值    
        Vue.component('my-parent',{
            props:['name'],
            template:'<div>我是父组件{{name}}</div>'
        })


        
        //parent父组件    
        Vue.component('parent',{
            template:'<div>  <child @childFn="transContent"></child> '+
                    '子组件传来的值:{{message}} </div>',
            data(){
                return{
                    message:''
                }
            },
            methods:{
                transContent(payload){
                    this.message=payload;
                }
            }  
        })

        // $emit传值
        //child子组件
        Vue.component('child',{
            template:'#child',
            data(){
                return{
                    message:'子组件的信息'
                }
            },
            methods:{
                childClick(){
                    this.$emit('childFn',this.message)    
                }
            }
        })

        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

直视~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue组件之间的数据传递

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>组件之间的数据传递</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app">
复制链接

扫一扫