Vue组件

最新推荐文章于 2024-07-22 21:47:11 发布

liangxiaoben123

最新推荐文章于 2024-07-22 21:47:11 发布

阅读量127

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/liangxiaoben123/article/details/109751748

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue组件

组件

组件

全局定义组件

全局定义组件（作用域隔离）

<script type="text/javascript">
Vue.component("com",{
          			template:`...`,
         			methods:{...},
         			data(){...}
          })
 var vm = new Vue({
					el:"",
					data:{...},
					...
})
 </script>

全局定义的组件可以被其他内容调用，值得注意的是组件里面的data是一个函数

局部定义组件

 <script type="text/javascript">
 Vue.component("com",{
                	template:`...
							<child></child> //定义的局部组件
							...`,
                	methods:{...},
                	data(){...},
                	//局部定义组件
             		components:{
                    	child:{
                        	template:``
                    		}
                	}
            }),

var vm = new Vue({
					el:"",
					data:{...},
					...
})
        </script>

局部组件只能在定义它的父组件中使用

组件父子通信

父传子

使用props方法

props:["...","..."]

例：

<div id="box">
     <navbar myname="home"></navbar>
</div>
<script type="text/javascript">
      Vue.component("navbar",{
            template:`<div>
                      <button>返回</button>
                      navbar -- {{myname}}
                      </div>`,
           props:["myname"] //接受父组件传来的属性
new Vue({
          el:"#box",
          data:{
          		parentname:""
               }
         })

如果传输属性是布尔值或者数据时需要动态数据绑定：

<navbar :myname="parentname" :myshow="true"></navbar>

或者可以规定传输属性的形式：

props:{ 
	myname: String,
    myshow: Boolean
     	}

子传父

使用.$emit方法在子组件分发事件并且传递子组件的参数
例：

<div id="box">
            //父组件
            <child @myevent="handleEvent($event)"></child>
        </div>
<script type="text/javascript">
//子组件
Vue.component("child",{
                template:`...
                            <button @click="payMoney()">click</button>
                           ...
                          `,
                data(){
                    return{
                        childname:"..."
                    }
                },
                methods:{
                    payMoney(){
                        this.$emit("myevent", this.childname)// 分发 事件
                    }
                }

})

new Vue({
          el:"#box",
          methods:{
                   handleEvent(ev){
                        console.log("...",ev)
                    }
                }
            })

同一父组件的不同子组件进行通信时同理是将事件写在父组件上，在要传输的一方进行分发，在另一方接受变化的信息即可。

组件refs

1.ref放在标签上，拿到的是原生节点<input type="text" ref="mytext"/>

在其他内容调用时，需要在父节点创建调用函数handleEvent(){}

在函数里面写this.$refs，this.$refs.mytext，this.$refs.mytext.value即可得到相应值
例：
<input type="text" ref="mytext"/>
<button @click="handleEvent">...</button>
…

methods:{ handleEvent(){ console.log(this.$refs.mytext)} }

2.ref放在组件上，拿到的是组件对象
例创建了child组件后：<child ref="mychild"></child>
同样在父节点创建调用函数handleEvent(){}
在函数里面写this.$refs，this.$refs.mychild，即可得到相应值,并且可以利用this.$refs.mychild.methods(data)传递参数

组件非父子通信 - - 事件总线

建立空Vue事例就是中央事件总线
在事件传输方用事件总线的.$emit分发事件
在事件接受方用生命周期函数(mounted)实时监控，并用事件总线的.$on接收事件
注：传输和接收的事件名称必须一致。
例：

var bus = new Vue(); //空Vue事例 就是中央事件总线
            Vue.component("weixinauthor",{
                template:`
                        <div style="background:blue">
                        <input type="text" ref="mytext"/>
                        <button @click="handleClick()">发布</button>
                        </div>
                `,
                methods:{
                    handleClick(){
                        bus.$emit("weixinmessage",this.$refs.mytext.value)
                    }
                }
            }),
            Vue.component("weixinuser",{
                template:`
                        <div style="background:yellow">
                        我是一个微信用户
                        </div>
                `,
                mounted(){
                    bus.$on("weixinmessage",(data)=>{
                        console.log("收到推送了",data)
                    })
                    console.log("生命周期函数 - 当前组件的dom 创建完成之后就会调用")
                }
            })

动态组件

 <body>
        <div id="box">
            <keep-alive>
            <component :is="who"></component>
            </keep-alive>
            <footer>
                <ul>
                    <li><a @click="who='home'">首页</a></li>
                    <li><a @click="who='list'">列表页</a></li>
                    <li><a @click="who='shopcar'">购物车页面</a></li>
                </ul>
            </footer>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#box",
                data:{
                  who:'home'
                },
                components:{
                    "home":{
                        template:`<div>home<input type="text"/></div>`
                    },
                    "list":{
                        template:`<div>list</div>`
                    },
                    "shopcar":{
                        template:`<div>shopcar</div>`
                    }
                }
            })
        </script>
    </body>