Vue小笔记———杂货铺计算属性和方法调用所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回

计算属性和方法调用

所有的计算属性都以函数的形式写在 Vue 实例内的computed选项内,最终返回计算后的结果
- 方法每次调用都会执行一次；
- 依赖的状态改变了：
- 计算属性会重新计算一遍；
- 方法会调用n次；
- 计算属性会把每次的结果缓存下来；

组件注册方式

全剧组件

Vue.component
局部组件

components
组件编写方式与Vue实例的区别
自定义组件需要一个 root element（根节点）
父子组件的data是无法共享的
组件可以有data、methods、computed但是data必须是一个函数

data(){return {dataList:dataitem}}

组件通信
父子组件传值
属性验证

refs

ref放在标签丽，可以拿到原生节点
ref放在组件上，拿到的是组件对象，也可以对子组件传值

//父组件通过在子组件中定义了ref后可以直接使用this.$refs.subText.subEvent来调用子组件里面的状态和方法
#子组件
<subbar ref="subText"></subbar>

#子组件
	Vue.component("navbar",{
		template:`
		<div >
			sub
		</div>
		`,
		data(){
			return {
				subComp:123123,
				subList:['123','avc','ggg']
			}
		},
		methods:{
			subEvent(data){
				console.log(123+1+43，data);
			}
		}
		
	})
	
	const vm = new Vue({
		el:'#app',
		data:{
			isShow:false，
            fuSay:'父对子通信'
		},
		methods:{
			handleEvent(){
				// console.log('test：',this.$refs.subText);
				this.$refs.subText.subEvent(this.fuSay)
			}
		}
	})

rel事件总线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <wxnauthor></wxnauthor>
            <wxnuser></wxnuser>
        </div>
    </body>

    <script src="../1day/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //中间人
        let bus = new Vue()

        //发布者
        Vue.component("wxnauthor",{
            template:`<div>
                <input ref="mytext" type="text"/>
                <button @click="handleAuthor">发布</button>
            </div>`,
            data(){
                return{
                    authorDataList:'123'
                }
            },
            methods:{
                handleAuthor(){
                    bus.$emit("wxmessage",this.$refs.mytext.value)
                }
            }
        })
        //收听者
        Vue.component("wxnuser",{
            template:`<div style="background-color:pink;width:333px;">
                接收信息
            </div>`,
            //实现监听，需要在合适的位置 添加上	bus.$on
            //vue的生命周期函数
            mounted() {
                //渲染完成生命周期函数
                console.log("渲染完成");
                bus.$on("wxmessage",(e)=>{
                    console.log("收到推送信息",e);
                })
            }
        })

        new Vue({
            el:'#app',
            data:{

            }
        })
    </script>
</html>