vue @click 赋值_vue: 深入及生命周期

在外部(js中或者其他vue实例中)改变vue实例中的内容

<div id="app">
     <p>{
    { title }}</p>
</div>
<div id="app2">
    <p>{
    { title }}</p>
    <button @click = 'changeTitle'>change vm1 title</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const vm = new Vue({
    
     el : "#app",
     data : {
    
         title: "我是一个vue实例"
     }
 })

 setTimeout(() => {
    
 vm.title = "我通过timer改变!"
        }, 1000)

 const vm2 = new Vue({
    
     el : "#app2",
     data : {
    
         title: "我是一个vue实例2"
     },
     methods: {
    
         changeTitle: function() {
    
             vm.title = "变变变！"
         }
     }
 })
</script>

在以上代码中，把vue实例赋值给一个名字，在其他地方就可以通过该名字调用这个实例的内容，比如在setTimeout中调用，或者是在vm2中调用。

Vue底层

我们打印一下vm2一个实例

console.log(vm2)

经过处理之后返回了一个对象，对象当中包含我们定义的函数和变量