子组件向父组件传值:

子组件注册事件:

this.$emit(事件名, value);

父组件监听事件:
  组件上:
    v-on:事件名="自定义方法名($event)",
    其中$event接收子组件传过来的值,此参数必须为$event

示例:

①脚手架

子组件:

methods: {
    send(){
        this.$emit(change, "我是传递的值!");
    }
}

组件(组件名为child):

<child v-on:change="receive($event)"></child>

父组件:

methods:{
  receive(data){
    console.log(data); // "我是传递的值!"
  }
}

    
js

 

定义组件名的方式有两种:

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时,
你也必须在引用这个自定义元素时使用 kebab-case,
例如

<my-component-name>

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时,
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
    var areaData = {
        areaShow:false,//是否显示区选择div
        tabShow:1,//显示区, 街, 社区 
        area: "请选择",//区名
        street:"",//街名
        community:"",//社区名
        areaList:["一区","二区"],//查询出来的区列表
        streetList:[],//查询出来的街列表
        communityList:[],//查询出来的社区列表
    };
    var index = {
        template: '#index',
        data: function(){
            return areaData;
        },
        created: function () {

        },
        methods: {
            areaSel: function () {//点击  下拉选择  初试弹出区选择
                var self = this;
                self.areaShow=true;
                self.tabShow=1;
            },
            areaSelClose: function () {//点击弹出框以外, 关闭弹出框
                var self = this;

                if(self.street=="请选择"){
                    alert("请选择街");
                    self.areaShow=false;
                    self.area="请选择";
                    self.street="";
                }else if(self.community=="请选择"){
                    alert("请选择社区");
                    self.streetList=[];
                    self.areaShow=false;
                    self.area="请选择";
                    self.street="";
                    self.community="";
                }else{
                    self.areaShow=false;
                }
            },

            areaLi: function (n) {//选择后,还没退出, 需要修改相应的位置,点击后弹出相应的列表
                var self = this;
                self.tabShow=n;
            },
            reStreet: function (name) {//查询街列表
                var self = this;
                /*Vue.resource("接口地址"+name).get().then(function (response) {
                    var data = response.data.data;
                    self.streetList= data;
                });*/
                self.streetList= ["一街","二街"];

                self.area=name;//将传过来的区名赋值给属性,并显示
                self.street="请选择";
                self.community="";
                self.tabShow=2;
            },
            reCommunity: function (name) {//查询社区列表
                var self = this;
                /*Vue.resource("接口地址"+name).get().then(function (response) {
                 var data = response.data.data;
                 self.communityList= data;
                 });*/
                self.communityList= ["一社区","二社区"];

                self.street=name;//将传过来的社区名赋值给属性,并显示
                self.community="请选择";

                self.tabShow=3;
            },
            areaComp: function (name) {//用来赋值最后的社区属性,并显示
                var self = this;
                self.community=name;
                self.areaSelClose();
            },
        }
    }

    var routes = [
        { path: '/', component: index }
    ]

    Vue.use(Vonic.app, {
        routes: routes
    })

注:需先引入Fleck包图片 1

父组件向子组件传值:

    在组件上绑定属性:v-bind:property="value" ,
    其中property为绑定的属性名,value为需要传的值(父组件数据中的属性名)
    在子组件里用props:["property"] 接收父组件传的值,其中property为组件上绑定的属性名

示例:

父组件:

data(){
    return {
        test: [{
            name:  "Amor",
            sex: "man",
            age: 18
        }]
    };
}

组件(组件名为child):

<child v-bind:users="test"></child>


子组件接收值:

props:["users"]

或

props: {
    users: {
        type: Array,
        required:true
    }
}

需求: vonic中实现级联选择

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注