Question

我花了两天时间，试图自己解决这个问题，但无法正常工作。基本上，我在父组件中声明了所有道具，但由于某些原因它们根本不显示。

组件

let addFilter = {
    props: ['newFilterName'],
    template:  `<div class="row">
                    <div class="field-options">{{ newFilterName }}</div>
                </div>`,
};

实例

let filterManager = new Vue({
    el: '#filter-manager',
    components: {
        'add-filter': addFilter
    },
    data: {
        newFilterName: 'Test1234'
    }
});

HTML

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter></add-filter>
     </div>
</div>

Answer 1

您需要将数据从父级传递到组件

PictureBox.Scale()

请注意，PictureBox是子组件的属性，右侧的public partial class Form4 : Form { public Form4() { InitializeComponent(); } bool ctrlKeyDown; bool shiftKeyDown; private void Form4_Load(object sender, EventArgs e) { this.ctrlKeyDown = false; this.shiftKeyDown = false; //If there's only PictureBox control on the panel, the MouseWheel event of the form raised //instead of the MouseWheel event of the Panel. this.MouseWheel += new MouseEventHandler(Form4_MouseWheel); this.KeyDown += new KeyEventHandler(Form4_KeyDown); this.KeyUp += new KeyEventHandler(Form4_KeyUp); //this is important for zooming the image this.pictureBox2.SizeMode = PictureBoxSizeMode.StretchImage; } void Form4_KeyUp(object sender, KeyEventArgs e) { this.ctrlKeyDown = e.Control; this.shiftKeyDown = e.Shift; } void Form4_KeyDown(object sender, KeyEventArgs e) { this.ctrlKeyDown = e.Control; this.shiftKeyDown = e.Shift; } void Form4_MouseWheel(object sender, MouseEventArgs e) { bool IsGoUp = e.Delta > 0 ? true : false; if (this.ctrlKeyDown) { if (IsGoUp && this.panel1.HorizontalScroll.Value > 5) { this.panel1.HorizontalScroll.Value -= 5; } if (!IsGoUp && this.panel1.HorizontalScroll.Value < this.panel1.HorizontalScroll.Maximum - 5) { this.panel1.HorizontalScroll.Value += 5; } } else if (this.shiftKeyDown) { int hStep = (int)(this.pictureBox2.Image.Width * 0.02); int vStep = (int)(this.pictureBox2.Image.Height * 0.02); if (IsGoUp) { this.pictureBox2.Width += hStep; this.pictureBox2.Height += vStep; } else { this.pictureBox2.Width -= hStep; this.pictureBox2.Height -= vStep; } } else { if (IsGoUp && this.panel1.VerticalScroll.Value > 5) { this.panel1.VerticalScroll.Value -= 5; } if (!IsGoUp && this.panel1.VerticalScroll.Value < this.panel1.VerticalScroll.Maximum - 5) { this.panel1.VerticalScroll.Value += 5; } } } }是您在父组件中定义的数据属性。只是给它们命名不起作用。实例化组件时需要分配。

Vue：组件中声明的道具未定义

1 个答案: