element组件知识点总结

1：单选框与多选框的change事件，html代码

<div id="app">
    <div class="demo box">
            <h6>例子13</h6>
            <template>
              <el-checkbox v-model="checked" @change="ceshi2" label="备选项">备选项</el-checkbox>
            </template>
    </div>
     <div class="demo box">
            <h6>例子14</h6>
            <template>
                <el-radio-group v-model="radio2" @change="ceshi">
                    <el-radio :label="1">备选项</el-radio>
                    <el-radio :label="2">备选项</el-radio>
                </el-radio-group>
            </template>
    </div>
</div>

对应的js代码

methods:{
                ceshi(value){
                    console.log(value);
                },
                ceshi2(event){
                    console.log(event.target.checked);
                }
 }

 2：vue监听键盘事件

    <div class="demo">
            <input type="text" name="" v-on:keyup='submit'>
    </div>

js

methods:{
         submit:function(event){
                   alert(event.target.value);
          }
},

 3：组件

<div id="app">
    <div class="demo">
        <h6>例子13</h6>
        <div>
          <input v-model="parentMsg">
          <br>
          <!--child作为一个组件被js中的template替换-->
          <child v-bind:my-message="parentMsg"></child>
          <!--父组件通过props: ['myMessage']把父组件的值传递给子组件-->
          <!--，而js中template用来生成子组件-->
        </div>
        <div>{{parentMsg}}</div>
    </div>
</div>

对应的js

var vueInit = function() {
        Vue.component('child',{
            props: ['myMessage'],
            template: '<span style="color:red">{{myMessage}}你好</span>',
            /*data:function(){
                return {
                    parentMsg: 'Message from parent'
                }
            }*/
        });
        new Vue({
          el: '#app',
          data:{
            parentMsg: 'Message from parent'
          }
        })
    }

 

注册组件component时，data是用来渲染组件中的参数，用来渲染myMessage；而组件构造器中的data是用来渲染页面父节点参数，用来渲染页面中的{{parentMsg}}；

 4：父子组件关系

Vue.component('child', {
  // 声明 props,告诉后面的template中的message是prop父子传递的参数
  props: ['message'],
  // message是来自于父组件
  template: '<span>{{ message }}</span>'
})

对应的html

<child message="hello!"></child>

标签<child>作为父组件，定义message（已经在js中定义为prop，用来传递参数）；