VUE组件开发 c-radio

基础要求

了解VUE基本程序结构，有CSS/HTML基础。

• VUE组件开发 c-radio https://www.jianshu.com/p/a47d91d0ef12
• VUE组件开发 c-daystep https://www.jianshu.com/p/6e66cc2f731e

VUE组件基础

示例组件为一个 c-radio 单选框组件，展示了VUE组件的事件使用，数据互通能力。

• Vue.component('c-radio', {...}) 方法定义组件；
• data: function () { return {...} } 使用function返回一个数据容器给每个组件实例；
• props: ['options'] 定义组件标签输入参数名称
• template:'
  ' 定义模板
• methods:{...} 定义组件方法

组件方法内，可以通过 $emit 私有基础方法来触发事件，如以下代码触发一个input事件，可结合双向绑定数据 v-model="price" 实现组件数据到父组的传输：

this.$emit("input", value);

使用c-radio组件：

参考：https://cn.vuejs.org/v2/guide/components.html

以下代码抵扣废话

vue 组件 c-radio demo

    
    
    
    
    
    
    


    
    

        Click me!
        pick {{price}}
        {{"请先登录"}}