Vue parent-child data transfer

Writing in the front

Recently I am learning Vue. In order to deeply understand the component value transmission of Vue, I wrote a demo to analyze some principles of Vue. The following two major problems occurred during the value transfer experiment using props and custom components.

practiceVuethepropsPassing data is not usedVue-CliThe scaffold.

  1. [Vue warn]: Unknown custom element: <son-container>The custom component could not be recognized.
  2. [Vue warn]: Property or method "son" is not defined on the instance but referenced during render. As well as[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Cannot be customized with child componentsprops.

VueLife cycle pairpropsThe impact of the transfer value

[Vue WARN]: Unknown Custom Element:

Questions about why child components are not loading.

Checking component code

JS part
    var vm = new Vue({
        el: "#father-container".data: {
            title: "Parent component data"
        }
    })

    Vue.component("son-container", {
        props: ['son-title'].template: '<h3>{{son-title}}</h3>',})Copy the code
HTML
    <div id="father-container">The parent component<son-container :son-title="title"></son-container>
    </div>
Copy the code

First of all, I checked the source code of the custom component, and did not solve the problem. During the period, I tried many solutions without fruit, and finally referred to the blog [Unknown Custom Element: < XXX >](Unknown Custom Element: < XXX > – Did you register the component correctly? Wrong solution _ Nobody touch my brick blog -CSDN blog), solved the problem.

    // Switch Vue.component to new Vue instance.
    Vue.component("son-container", {
        props: ['son-title'].template: '<h3>{{son-title}}</h3>',})var vm = new Vue({
        el: "#father-container".data: {
            title: "Parent component data"}})Copy the code
Why did they switch?JSThe code sequence solved the problem.

This problem occurs because the component is not registered and the parent component’s VUE instance is loaded and JS is executed from top to bottom, so the guess is related to the VUE life cycle and how JS is executed. After the source code understanding advanced to continue to read.

Code rule pairVueThe impact of the transfer value

After solving Unknown custom element: < XXX >, the problem of 2 in the preface appears again.

Very confused, why will appearpropsUnable to send parameters

Son-title cannot be assigned even if the props argument is replaced with a constant.

solution

  1. There were two warnings because they couldn’t be foundProperty or method 的 sonandtitle 。
  2. Guess did not set my ohpropsAs a separate entity. Try naming it after a small humpJS part program.
willJavaScriptPart of thepropsNamed inThe small hump rulenamed
    Vue.component("son-container", {
        props: ['sonTitle'].template: '<h3>{{sonTitle}}</h3>',})Copy the code

When the problem is resolved, the console type vm.title = “Hello! The

component displays data as it changes.

Finally, the Vue official document style guide – vue.js