Evaluate properties and method calls

  • All computed attributes are written as functions in the computed option in the Vue instance, which ultimately returns the computed result

    • Method is executed once per call;
    • The state of the dependency changes:
    • Calculated properties are recalculated;
    • Method is called n times;
    • The calculated property caches the result of each time;

  • Component Registration

    • That the component

      Vue.component

    • Local components

      components

    • The difference between how components are written and Vue instances

    • Custom components require a root Element

    • Data from parent and child components cannot be shared

    • Components can have Data, methods, computed, but data must be a function

    data(){return {dataList:dataitem}}
Copy the code

    • Component communication

    • Parent and child components pass values

    • Property verification

    • refs

      • Ref in the label, you can get the original node
      • Ref is placed on the component, gets the component object, and can also pass values to child components
      $refs.subtext.subevent (); // The parent component can call the state and method in the child component by defining the ref in the child component<subbar ref="subText"></subbar> # subcomponent Vue.component("navbar", {template:` 
          
      
            sub 
          
       `      .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:'Father to child'
		},
		methods: {handleEvent(){
				/ / the console. The log (' test: 'this. $refs. SubText);
				this.$refs.subText.subEvent(this.fuSay)
			}
		}
	})
Copy the code
      • Rel event bus
      <! DOCTYPEhtml>
<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">
        / / broker
        let bus = new Vue()

        / / publisher
        Vue.component("wxnauthor", {template:'
           
       
             
             
           
      .data(){
                return{
                    authorDataList:'123'}},methods: {handleAuthor(){
                    bus.$emit("wxmessage".this.$refs.mytext.value)
                }
            }
        })
        / / listeners
        Vue.component("wxnuser", {template:`
           
      
             Receive message 
           
       '      .// To implement listening, add bus.$on in the appropriate place
            // Vue lifecycle function
            mounted() {
                // Render complete lifecycle function
                console.log("Render complete");
                bus.$on("wxmessage".(e) = >{
                    console.log("Received push message",e); })}})new Vue({
            el:'#app'.data: {}})      </script>
</html>

Copy the code