晚上：上課筆記，聽完自己獨立完成

柒國招發表於2019-04-19
筆記
v-for="(item,key,index) of userInfo"

userInfo:{
    name:"qgz",
    age:28
}

vm.$set(vm.userInfo,address,"beijing")//set方法新增響應屬性（值改變，頁面中也變化）
複製程式碼

注意 mounted 不會承諾所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

<ul>
<li is="元件">
複製程式碼
操作DOM：
ref="引用名"
this.$refs.引用名.操作
複製程式碼
操作元件：
<子元件 ref="引用名">
this.$refs.引用名.

複製程式碼
子元件的data必須是函式
父元件可以不是
複製程式碼
兩個子元件count++時，實現父元件總的count更新：
子元件中：
count++後
this.$emit('change')
<seller @change="handleChange">
父元件：
method中註冊：handleChange
複製程式碼

@事件 @是監聽的意思

子元件props接收父元件傳來的
變數count，不能修改count。
但可以
data(){
return {
number: this.count
}}
複製程式碼
<子元件 :變數="資料">
<子元件 變數="字串">
複製程式碼

子元件接收引數，處理校驗：

props:{
    content:{
        type:String,
     //   require:false,//是否必傳
      //  default:'default value',
      validator:function(value){
          return (value.length>5)
      }
      
    }
}
複製程式碼

子元件上繫結的事件不是原生事件（click），加上native才是

<子元件 @click.native="handleClick">
複製程式碼

非父子元件傳值： 方案一：bus/匯流排/釋出訂閱/觀察者模式

Vue.prototype.bus=new Vue()
//每個例項都有bus屬性
元件的methods裡
this.bus.$emit('change'，this.content)
另一元件：
mounted:function(){
    var _this=this;
    this.bus.$on('change',function(msg){
        _this.content=msg;
    })
}
複製程式碼

相關文章