分类 Vue 下的文章

Vue.observable是一个可以被Vue 实例观察的响应式对象,用法和普通的 JavaScript 对象类似。例如,你可以使用它来创建一个可以被任何 Vue 组件监听的全局对象:

const ObservableState = Vue.observable({
count: 0
});

// 你可以使用 $watch 来监听它:
this.$watch(
() => ObservableState.count,
(newValue, oldValue) => {

// 此处是回调函数 

}
);

Vue2 提供了一个内置函数slice()可以将响应式数组变量转换为普通数组变量。调用该函数可以将响应式数组转换为一个全新的非响应式数组。例如:
let a = this.$set(Vue.observable([1,2,3]), 0, 4);
let b = a.slice(); // b不是响应式的,而a仍然是响应式的

受控组件是受应用状态的控制的,而非受控组件则不受应用状态的控制。下面是一个受控组件的代码示例:

 
class ControlledInput extends React.Component { 
  constructor(props) { 
    super(props); 
   
    // 将state更新传递给value 
    this.state = { 
      input: "" 
    }; 
   
    this.handleInputChange = this.handleInputChange.bind(this); 
  } 
 
  handleInputChange(event) { 
    this.setState({ input: event.target.value }); 
  } 
 
  render() { 
    return ( 
      <input  
        value={ this.state.input }  
        onChange={ this.handleInputChange }  
      /> 
    ); 
  } 
}

父组件:

<template>
 <div>
   <Child>
     <template #header="slotProps">
       <h1>{{slotProps.params.title}}</h1>
     </template>
   </Child>
 </div>
</template>
<script>
import Child from './Child'
export default {
 components: {
   Child
 }
}
</script>

子组件:

<template>
 <div>
   <slot name="header" :params="data"></slot>
 </div>
</template>
<script>
export default {
 data () {
   return {
     data: { title: 'hello world' }
   }
 }
}
</script>

 // Example: 
const formElement = document.querySelector('#form');
 const formData = new FormData(formElement);
formData.append('file', fileInput.files[0]);
 axios.post('https://uploadurl.com', formData).then(response => {
  console.log(response);
});