1. 需求是 select 联动, select 标签需要做成组件在其他页面中使用, 这样就少不了父子组件传值.
父组件
- <template>
- <div class="dashboard-editor-container">
- <sec-option :send-data="queryData" @sendSon="getSondata"></sec-option>
- <p>{{sonData}}- 父组件 </p>
- </div>
- </template>
- <script>
- export default {
- name: "dashboard-admin",
- components: {
- secOption
- },
- methods: {
- getSondata(data){
- this.sonData = data;
- }
- }
- }
- </script>
子组件
- <template>
- <el-row :gutter="8">
- <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
- <el-form :inline="true" :model="sendForm" class="demo-form-inline">
- <el-form-item label="平台">
- <el-select v-model="sendForm.platId" filterable placeholder="请选择平台" @change="secPlat">
- <el-option v-for="item in cbData.plat" :label="item.plat_name" :value="item.plat_id" :key="item.plat_id"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="渠道">
- <el-select v-model="sendForm.channel" filterable placeholder="请选择渠道" @change="secChannel">
- <el-option v-for="item in cbData.channel" :label="item.channel_name" :value="item.channel" :key="item.channel"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="区服">
- <el-select v-model="sendForm.server" filterable placeholder="请选择区服" @change="secServer">
- <el-option v-for="(item,index) in cbData.server" :label="item.servername" :value="item.server" :key="index"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="check"> 查询 </el-button>
- </el-form-item>
- </el-form>
- </el-col>
- </el-row>
- </template>
- <script>
- import {
- get_quota,
- get_platID,
- get_ChannelList,
- get_server
- } from "../../api/index/getOptions.js";
- import { getToken } from "../../utils/";
- export default {
- name: "App",
- props: {
- sendData: {
- type: Object
- // default: {}
- }
- },
- data() {
- return {
- query: this.sendData,
- sendForm: {
- appId: this.sendData.appId,
- platId: "-999",
- channel: "-999",
- server: "-999"
- },
- cbData: {
- plat: {},
- channel: {},
- server: {}
- },
- secData: {
- appId: this.sendData.appId,
- }
- };
- },
- methods: {
- check (){
- this.$emit("sendSon",this.sendForm );
- },
- secPlat() {
- this.sendForm.channel = "-999";
- this.sendForm.server = "-999";
- this.getChannel(this.sendForm);
- this.getServer(this.sendForm);
- },
- secChannel() {
- this.sendForm.server = "-999";
- this.getServer(this.sendForm);
- },
- secServer () {
- },
- getQuota(query) {
- get_quota(query)
- .then(res => {
- console.log(res);
- })
- .catch(err => {
- console.log(err);
- });
- },
- getPlat(query) {
- get_platID(query)
- .then(res => {
- this.cbData.plat = res.data[0].platList;
- })
- .catch(err => {
- console.log(err);
- });
- },
- getChannel(query) {
- get_ChannelList(query)
- .then(res => {
- this.cbData.channel = res.data[0].channelList;
- })
- .catch(err => {
- console.log(err);
- });
- },
- getServer(query) {
- get_server(query)
- .then(res => {
- this.cbData.server = res.data[0].serverList;
- })
- .catch(err => {
- console.log(err);
- });
- }
- },
- mounted() {
- this.getPlat(this.sendData);
- this.getChannel(this.sendData);
- this.getServer(this.sendData);
- }
- };
- </script>
事实证明 第一次 select 选择的时候页面不会打印数据 , 点击查询之后 页面会渲染子组件的数据, 但是再次更改的时候页面数据会继续触发 $emit, 并渲染页面, 这并不是想要的结果, 必须是点击查询之后才会通知 父组件更新数据.
解决方案: 应该是引用传值的问题, 把 data 改成 str 类型就可以, 这样就会避免引用问题.
this.$emit("sendSon",JSON.stringify(this.sendForm) );
来源: http://www.qdfuns.com/article/37522/25830f42af096fe6cec02d86e2b51249.html