This is the first day of my participation in Gwen Challenge

Component description

  • Components are used to encapsulate some functions of a page, and encapsulate the structure, style, and logical code of a function as a whole.
  • Improved functionality reusability and maintainability, and better focus on business logic.
  • The component is used as a custom HTML tag. The component name is used as the custom tag name.

The component registration

Global registration

  • Globally registered components can be used in any instance or component after registration.
  • Note: Global registration must be set before the root Vue instance is created.

Component based

  • In essence, components are reusable Vue instances so they can receive the same options as new Vue, such as Data, methods, and lifecycle hooks.
  • The only exception is that el is an option specific to the root instance, not the component.

Component naming rules

  • Components have two naming conventions:
    • Kebab – case: ‘my – component’
    • PascalCase: ‘MyComponent’
  • Note: No matter which naming is used, only kebab-case is available in the DOM.

The template options

  • Used to set the structure of the component, which is eventually introduced into the root instance or other components.
Vue.component('MyComponentA', {template:'
      
 
       
 The header content of component A 
 
      
'
});
Copy the code
  • Note: The component must have only one root element. If you write it like this, you’ll get an error.
Vue.component('MyComponentA', {template:` < div > < h3 > the title of the component A content < / h3 > < / div > < div > < h3 > component A another title content < / h3 > < / div > `
});
Copy the code

The data options

  • The data option is used to store the component’s data. Unlike the root instance, the component’s data option must be a function, and the data is set in the return object.
  • This is implemented to ensure that each component instance can maintain a separate copy of the returned object without affecting each other.
// Create Vue components
Vue.component('MyComA', {template:` 
      
 
       
{{title}}
 
      
 `.data:function(){
        return {
            title:'New content'}}});Copy the code

Local registration

  • Locally registered components can only be used in the current instance or component.
new Vue({
    el:'#app'.// Local registration
    components: {'my-component-a': {template:`<h3>{{title}}</h3>`.data(){
                return {
                    title:'A component Sample content'}}}}});Copy the code

Other ways of writing local registration

  • Configure the option object for the component separately
var MyComponentA = {
    template:` 
{{title}}
 `.data() {
        return {
            title:'HelloA'}}};var MyComponentB = {
    template:` 
{{title}}
 `.data() {
        return {
            title:'HelloB'}}};new Vue({
    el:'#app'.// Local registration
    components: {// 'my-component-a':{
        // template:`
{{title}}
`,
        // data(){
        // return {
        // title:' A component sample content '
        / /}
        / /}
        // }
        'my-component-a':MyComponentA,
        'my-component-b':MyComponentB
    }
});
Copy the code
  • ES6 short for object properties
new Vue({
    el:'#app'.components:{
        MyComponentA,
        MyComponentB
    }
});
Copy the code

Component communication

  • The problem
    • How does a child get data from a parent?
    • How does the parent component know about the child component’s data changes?
  • The operation of passing data between components is called component communication.

Parent component passes value to child component

  • Receives a value from the parent component via the props option of the child component.
<body>
    <div id="app">
        <my-component-a :child-title = "title"></my-component-a>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        / / child component
        Vue.component('MyComponentA', {// Receives the value of the parent component
            props: ['childTitle'].template:` 
       
 
        
{{titleB}}
 
       
 `.data() {
                return {
                    titleB:this.childTitle+'Child component received successfully! '}}});/ / the parent component
        new Vue({
            el:'#app'.data: {title:'Title of parent component'}});</script>
</body>
Copy the code
  • Note:Props should not have attributes of the same name as data.
    • If you want to change in a child component, process the data that the parent component passes to us
    • It should be stored via Data or set via a function that evaluates properties.
  • Properties written to the child component are added directly to the root tag of the child component.

Props naming rule

  • CamelCase is recommended for prop naming and kebab-case for parent component binding
<! -- Parent component binding child-title-->
<my-component-a :child-title = "title"></my-component-a>
Copy the code
// The child component receives childTitle
<script>
        Vue.component('MyComponentA', {// Receives the value of the parent component
            props: ['childTitle']... } </script>Copy the code

Exercise (Passing values from parent to Child)

  • Create components with V-for
<body>
    <div id="app">
        <my-component-a v-for="good in goods"
                        :key = "good.id" 
                        :name = "good.name"></my-component-a>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        / / child component
        Vue.component('MyComponentA', {props: ['name'].template:` 
{{goodName}}
 `.data() {
                return {
                    goodName:this.name
                }
            }
        });
        // Create component exercises with v-for
        / / the parent component
        new Vue({
            el:'#app'.data: {goods: [{id:1.name:'pear'},
                       {id:2.name:'strawberry'},
                       {id:3.name:'banana'}}}]);</script>
</body>
Copy the code
  • Summary: The name in props needs to be the same as the name of the subcomponent binding

Unidirectional data flow

  • All prop bindings between parent and child components are one-way downlink.
  • If prop data is to be processed by a child component, it should be stored in data.
  • Note: If prop is an array or object, child component operations will affect the state of the parent component. Therefore, avoid passing an array or object as a whole and pass it apart.
<! -- Pass as a whole, modify the contents of the parent component -->
<body>
    <div id="app">
        <! -- Subcomponent -->
        <my-com :user='user'></my-com>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        // Create a child component
        Vue.component('MyCom', {props: ['user'].template:` 
       
 
        
{{user.name}}
 
       
 `.data(){
                return {
                    users:this.user
                }
            }
        });
        // Create the root instance
        new Vue({
            el:'#app'.data: {user: {name:'Joe'.hobby:'Play the piano, read a book, do yoga.'}}});</script>
</body>
Copy the code

Props type

  • Prop can set type checking, in which case you need to change props to an object with validation requirements and specify the corresponding type. (Vue will warn warn⚠ if you do not pass values of the specified type)
  • Note: both null and undefined can store arbitrary values
  • Prop can specify multiple types at the same time and can be stored as an array.
// Create a child component
Vue.component('MyCom', {props: {parStr: [String.Array].parArr:Array.parBool:Boolean.parAny:undefined
    },
    template:` 
      

        {{parStr}} {{parArr}} {{parBool}} {{parAny}} 
      
 `
});
Copy the code

Props to verify

  • When multiple rules need to be set on prop, you can set the value of prop as an option object.
  • 1. The previous type detection function is set with the Type option.
  • 2. Required Indicates that data is required
  • 3. Default Specifies the default value for the option, which takes effect when the parent component does not pass data.
<div id="app">
<! -- If arR is not passed to a child component, it will be warned -->
<my-com :par-str='str'
        :par-bool='bool'
        :par-any='any'
        ></my-com>
</div>
Copy the code
// Create a child component
Vue.component('MyCom', {props: {// Type detection by type (Vue warning)
        parStr: {type: [String.Array]},// The original type detection method (Vue warning)
        parArr: {type:Array.required:true
        },
        parBool: {type:Boolean.default:true
        },
        parAny:undefined
    },
    template:` 
      

        {{parStr}} {{parArr}} {{parBool}} {{parAny}} 
      
 `
});
Copy the code
  • Note: When the default value is an array or object, it must be in the form returned by the factory function.
props:{
  // Type detection by type (Vue warning)
  parStr: {type: [String.Array.Object].default:function(){
          return [1.67.34.2]; }}}Copy the code
  • Validator is used to set validators for passed prop. Vue.js will warn if return is false.
parStr:{
    type:String.// Validate the function
    validator:function(val){
        return val.startsWith('swun'); }}Copy the code
  • Note: Data, methods and other functions of the instance cannot be used in the validation function.
    • Prop’s validation is done before the instance is created. Therefore, data\methods cannot be used until the instance of the component is created.

The Props attribute

  • When a parent component sets a property to a child that does not exist in a prop, it is automatically bound to the root element of the child.
  • If the component root element already has an attribute, the value inside the component is replaced.
  • The exception is class and style, where properties are automatically merged when both inside and outside are set.
  • If you don’t want to inherit properties inherited by the parent component, set inheritArrts:false, but only for common properties, leaving class and style unaffected.
<div id="app">
    <my-com
        demo-attr='Sample Properties'
        title="Example title"
        style="height: 200px;"
        class="colorBlue"
    ></my-com>
</div>
Copy the code
// Create a child component
Vue.component('myCom', {inheritAttrs:false.template:"
});
 // Create the root instance
new Vue({
    el:'#app'
});
Copy the code