拓展-如何通过调整组件属性，实现修改组件的显示等内部属性。

使用 Props（全局）

全局定义组件

Vue.component('example1', {
  props: ['value'],
  template: '<button v-on:click="incrementHanlder">{{value}}</button>',
  // data: function () {
  //   return {
  //     count: 0
  //   }
  // },
  methods: {
    incrementHanlder: function () {
      // this.count += 1
      this.$emit('incretment')
    }
  }
})
new Vue({
  el: '#div_col',
  data: {
    total: 0
  },
  methods: {
    incretmentTotal: function () {
      this.total += 1
    }
  }
})

尝试一下 »

子组件通过 $emit 触发父组件的方法时，如果需要传递参数，可在方法名后面加参数数组。

比如 $emit("FunctionName") 当要传递参数时 ：$emit("FunctionName",[arg1,arg2...])。

methods: {
    incrementHandler: function (v) {
        if(v==1){
            this.counter -= 1
            this.$emit('increment',[1])
        }else{
            this.counter += 1
            this.$emit('increment',[2])
        }
    }
}

尝试一下 »

父组件给子组件传值的时候，如果想传入一个变量，写法如下：

// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data:{
    message:"hello",
  }
})

尝试一下 »

<div id="form">
  <label for="username">昵称：</label>
  <input type="text" id="username" v-model.trim="username">
  <br>
  <label for="age">年龄：</label>
  <input type="number" id="age" v-model.number="age">
  <br>
  <label for="checkbox">单身：</label>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <br>
  <label>喜欢：</label>
  <input type="checkbox" id="facesoho" value="facesoho" v-model="checkedNames">
  <label for="facesoho">facesoho</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <br>
<input type="submit" v-on:click="submit"/>
  <br/>
  <br/>
  <span>昵称: {{ username }}</span>
  <br>
  <span>年龄: {{ age }}</span>
  <br>
  <span>单身: {{ checked }}</span>
  <br>
  <span>喜欢: {{ checkedNames }}</span>
</div>

尝试一下 »

动态全反选。

var app = new Vue({
    el: '#app',    
    data: {
        checks:false,
        checkList: [
            {id:1, name:'苹果'},
            {id:2, name:'香蕉'}, 
            {id:3, name:'栗子'},
            {id:4, name:'橘子'}
        ],        
        checksListOn: []
    },    
    methods: {
        Numlist : function(){
            if(this.checks){
                var listArr=[];
                for(var i=0;i<this.checkList.length;i++){
                    listArr.push(this.checkList[i].name);                
                }
                this.checksListOn = listArr;            
            }else {
                this.checksListOn = []
            }
        }
    },    
    watch: {
        "checksListOn":function () {
            if(this.checksListOn.length == this.checkList.length){
                this.checks = true            
            }else {
                this.checks = false           
            }
        }
    },
})

尝试一下 »