Vue的组件传值

最新推荐文章于 2024-02-26 13:50:31 发布

文阳兄

最新推荐文章于 2024-02-26 13:50:31 发布

阅读量174

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/LaoYangSaid/article/details/107643531

版权

Vue的组件

组件分为全局组件与局部组件

全局组件

<body>
    <div id="app">
        <btn-con></btn-con>
    </div>
    <script src="./Vue/vue.min.js"></script>
    
    <script>
    //这是定义全局的 component为组件的单词
        Vue.component('BtnCon',{ //这里是定义
        //template为模板占位符 不会直接渲染页面
         template:` <button @click="plus">计算计数{{count}}</button>`,
         data(){//data()为函数并不是对象 因为相当于对象为浅拷贝 有a b的值 改变a的值 b的值也跟着a而改变
         //函数的话相当于深拷贝 b不会随着a的改变而改变
             return //不使用return包裹的数据会在全局可见会造成全局污染 使用return只在当前页面生效
                 count:0
             }
         },
         methods:{
            plus(){
                this.count++
            }
        }
        })
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>

效果 当有多个相同操作的话点击哪个变化哪个这就是组件的好处
在这里插入图片描述

局部组件

components必须加 S


<body>
    <div id="app">
        <btn-con></btn-con>
        <btn-con></btn-con>        
        <btn-con></btn-con>
    </div>
    <script src="./Vue/vue.min.js"></script>
    <script>
    //定义一个子组件
        const BtnCon={
            template:` <button @click="plus">计数{{count}}</button>`,
            data(){
                return{
                    count:0
                }
            },
            methods:{
                plus(){
                    this.count++
                }
            }
        }
        //把这个根组件当中子组件的父
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{
           },
          
           components:{//把定义的组件写在这就是形成了局部的组件
           //只有这里面的数据才可以调用它 其他的不可以
                BtnCon
               }
        });
    </script>
</body>

在这里插入图片描述

组件当中的传值(数据通信)

父向子传值子通过自定义属性来监听父亲的值通过props属性来接收父亲的值

<body>
    <div id="app">
        <Son :type="msg" :type1="arr"></Son> 　//3把定义的写在这里进行读取 :type="msg" type是自定义的 msg是接收父亲定义的属性 要动态获取加：
    </div>
    <script src="./vueYWY/Vue/vue.min.js"></script>
    <script>
        // 局部组件 
                                           // 1 定义一个son
        const Son={
        props:['type','type1'],  　//4 用props来接收数据      
       //template模板占位符
       template:`
       <div>
            <p>这是俺自己的数据:{{msg1}}</p>
            <p>接收father的数据:{{type}}</p>
            <p>接收father的数据:{{type1}}</p>
            <button @click="change">Change your dad's data</button>
        </div>
       `,
       data(){ //data是个对象 里面固定是return 然后写自己的属性
           return{
             msg1:'Iam your Son'
           }
       },
       methods:{
           change(){
               this.type1.push(22222)
           }
       }
        }
        var vm = new Vue({//这位是farther
           el:'#app',
           data:{                       //3 写父亲的方法与变量
               msg:'Iam your father',
               arr:[111111]
           },
           methods:{
           },                              //2把定义的写在这里
           components:{
               Son
           }
        });
    </script>
</body>

在这里插入图片描述

子向父传值用 $e m i t 来发送数据子里面的值通过$ emit发送出去数据 $emit有二个参数(自定义参数,this.子要传送的值)

 然后通过父子的那个标签进行监听 @刚刚自定义的参数 = 值
 然后监听的值属性在父标签里

<body>
    <div id="app">
        <!-- 这里的@指的是监听
        @senddata这里指的是刚刚定义的自定义属性 用来监听改变
        -->
        <h4>这是子向父传的值{{parentmsg}}</h4> //
        <son @senddata="getdata"></son> //这一步是使子与父对应 3
        
    </div>
    <script src="./vueYWY/Vue/vue.min.js"></script>
    <script>
        // 定义一个子组件              1
        const Son = {
            template: `
            <div>
            <ul>
                <li>这是他儿子的数据{{msg}}</li>
                <button @click="send">向他爸爸传递数据</button> //
            </ul>
        </div>
            `,
            data() { 
               return{
                msg:'table'
               }
            },
            methods: {
                send(){
                    // 发送自定义事件 第一个参数是自定义的属性 第二个参数后面携带的是要发送的信息  
                    this.$emit("senddata",this.msg) //4
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                // 定义一个空的用来接收上面传出的值   5
                parentmsg:''
            },
            methods: {
                // 把刚刚子组件自定义用来监听写的进行读取  6
                getdata(data){
                this.parentmsg=data;
                }
            },
            // 2 把定义的子组件放置在这里    
            components: {
                Son
            }
        });
    </script>
</body>

在这里插入图片描述

非父子传值

用 $emit来发送数据用 $on 来发送数据用 Bus来建一个公交站
需求是有个主页面 A， B ，ＡＡ　页面　ＡＡ是Ａ的子组件　让Ａ　Ｂ没任何关系　让ＡＡ的数据传给Ｂ该如何实现

        非父子组件传值 创建一个公共汽车  const Bus=new Vue();
        然后通过Bus.$emit来发送数据   Bus.$emit('send1',this.msg) 第一个参数是自定义属性 第二个要发送的值
        Bus.$on来直接接收数据 接收数据要创建一个空的值 
        有回调方法 第一个是发送的自定义属性  第二个参数是回调函数 
         parent:''//这个是要创建一个空值来通过回调的方法接收发送来的数据
         Bus.$on('send1',(data)=>{
        this.parent=data

这是主页

   <div id="app">
        <com-a></com-a>
       <br>
       <br>
        <com-b></com-b>
         
    </div>
    <script src="../vueYWY/Vue/vue.min.js"></script>
    <script src="./comAA.js"></script>
    <script src="./comA.js"></script>
    <script src="./comB.js"></script>
    <script>
        // 创建一个bus公共的
        const Bus=new Vue();
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{},
           components:{
            comA,
            comB
           }
        });
    </script>
</body>

这是 comA.js页面

const comA={
    template:`
    <div>
    <p>comA</p>
    <hr>
    <p><com-a-a></com-a-a></p>
    </div>
    `,
    components:{
        comAA
    }
}

这是 comB.js页面

const comB={
    template:`
    <div>
    <p>接收传来的值{{msg}}</p>
    </div>
    `,
    data(){
        return{
            msg:''
        }
    },
    // 用$on来进行接收
    created(){
        // 监听AA发送的send数据
     Bus.$on("send",(data)=>{
       this.msg=data
     })
    }
}

这是 comAA.js页面

const comAA={
    template:`
    <div>
    <p>comAA</p>
    <p><button @click="send">传向comB</button></p>
    </div>
    `,
    data(){
        return{
            msg:'俺是comAA'
        }
    },
    methods:{
        send(){
            // 第二个是要传送的参数数据
            // 非父子是.$emit进行传送数据
            Bus.$emit("send",this.msg)
        }
    }
}

在这里插入图片描述

文阳兄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的组件传值

Vue的组件组件分为全局组件与局部组件全局组件<body> <div id="app"> <btn-con></btn-con> </div> <script src="./Vue/vue.min.js"></script> <script> //这是定义全局的 component为组件的单词 Vue.component('
复制链接

扫一扫