Vue generates components manually. Specifying parent, will affect setting the propvalue of subcomponents.

  1. key code: 

        // Child Component
    var TestComp = Vue.component("TestComp", {
        template: `<div>Child Component Prop Value : <br/> {{text}} </div>`,
        // child component prop --> text
        props: {text: {default: "init prop"}}
    });


    // Parent
    var vm = window.vm = new Vue({
        el: "-sharproot",
        template: "-sharpapp",
        mounted() {
            this.createSubComp();
        },
        data() {return {}},
        methods: {
            createSubComp() {
                var that = this;

                var copy = Vue.extend(TestComp);
                var instance = window.vmsub = new copy({
                    // 
                    // parent: parent, vue-devtoolsvue
                    // parent: that
                });
                instance.text = "pass child component prop";
                instance.$mount();
                this.$el.append(instance.$el);
            } 
        },
        components: {TestComp}
    });

  2. description:

    • A child component: TestComp, which has a prop:text, and a parent component, generates a child component instance in the parent component
    • currently parent: that is uncommented. At this time, it is possible to set the subcomponent prop:
      instance.text = "pass sub component prop";
      if you uncomment and execute again at this time, an exception will be reported:
      Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders,
      Instead, use a data or computed property based on the prop"s value. Prop being mutated: "text"
      Why does canceling setting parent: that, affect setting prop?
Vue.js
Aug.27,2021

when parent is not set, instance is equivalent to a root instance, and the root instance is a

that can directly modify the properties of props .

clipboard.png

Previous: Controls the display of parts of the referenced page

Next: Vue form page change time serial number and content refresh do not Synchronize

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu