Vue learning: knowledge points such as props, scope, slot, ref, is, slot, sync, etc.

1、ref : Specify an index ID for the child component to register reference information for the element or component. refs is an object that contains all ref components.

<div id="parent">
　　<user-profile ref="profile"></user-profile>（子组件）
</div>

var parent = new Vue({ el: '#parent' })
// access child component
var child = parent.$refs.profile

ps: $ indicates that refs are vue objects, not ordinary js objects.

2. props: The parent component transmits values ​​(data) to the child component, and the camel case is changed to a horizontal line.

Vue.component( 'child', {

// declare props

props: [ 'message'],

// just like data, prop can be used inside templates

// can also be used in vm instance like "this.message"

template:  '<span>{{ message }}</span>'

})

3, scope scope

In the parent, an element with a special attribute  scope must  <template> exist, indicating that it is a template for a scoped slot. scope The value of corresponds to the name of a temporary variable that receives the props object passed from the child component:

<div class="parent">

<child>

<template scope="props">

<span>hello from parent</span>

<span>{{ props.text }}</span>

</template>

</child>

</div>

 

4. is is used for dynamic components and gives constraints within the DOM to work

 

Dynamic components:

Since custom tags cannot be inserted into tags such as table, ul, and ol, only specific tags can be inserted, so the is attribute is used to bring them in. By using a reserved  <component>  element, dynamically bound to its  is  attributes, we allow multiple components to use the same mount point and switch dynamically:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var  vm =  new  Vue({    el:  '#example' ,    data: {      currentView:  'home'    },    components: {      home: {  /* ... */  },      posts: {  /* ... */  },      archive: {  /* ... */  }    } }) <component v-bind:is= "currentView" >    <!-- 组件在 vm.currentview 变化时改变！ --> </component>

　my-row is a custom component

1 2 3

<table>    <tr is= "my-row" ></tr> </table>

　

 5. Slot distribution content

The unnamed slot is used for alternate insertion. When the child component has only an unnamed slot, the parent component will call back the slot content. If the child component has other content, the content of the parent component will replace the slot content, and the slot content will not be displayed.

1 2 3 4 5 6

<div>    <h2>我是子组件的标题</h2>    <slot>      只有在没有要分发的内容时才会显示。    </slot> </div>

　　

1 2 3 4 5 6 7 8

父组件模版： <div>    <h1>我是父组件的标题</h1>    <my-component>      <p>这是一些初始内容</p>      <p>这是更多的初始内容</p>    </my-component> </div>

　　

1 2 3 4 5 6 7 8 9

渲染结果： <div>    <h1>我是父组件的标题</h1>    <div>      <h2>我是子组件的标题</h2>      <p>这是一些初始内容</p>      <p>这是更多的初始内容</p>    </div> </div>

　　

 

6. The sync character modifier

When a child component changes the value of a prop, the change is also synchronized to the value bound in the parent component.

is a  v-on listener that will be extended to automatically update properties of the parent component.

For example , < comp  :foo.sync= "bar"> </ comp> will be expanded to:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新  foo 的值时，它需要显式地触发一个更新事件： this.$emit('update:foo', newValue)