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中调用。

e6913686be38e8d980d4acdcbbc2f9f7.png

Vue底层

我们打印一下vm2一个实例

console.log(vm2)

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]和\[2\]提供了一些关于Vue模板中使用未定义或空值变量的示例代码。在这些示例中,如果使用了未定义或空值的变量,就会导致报错。而引用\[3\]提到了一个类似的错误,即在部署到服务器后,切换路由时出现了报错。根据错误信息"vue.runtime.esm.js:3049 TypeError: Cannot read properties of null (reading 'list')",可以推断出问题可能是在某个组件中,尝试读取了一个名为'list'的属性,但该属性的值为null,导致了报错。 要解决这个问题,可以按照以下步骤进行排查和修复: 1. 检查相关组件中是否存在对'list'属性的引用。可以使用浏览器的开发者工具,在控制台中查找报错的组件和代码位置。 2. 确保在使用'list'属性之前,该属性已经被正确地初始化或赋值。可以在组件的data选项中定义'list'属性,并为其设置一个默认值或初始值。 3. 检查数据源,确保在使用'list'属性之前,数据已经被正确地获取或加载。可以使用Vue生命周期钩子函数(如created或mounted)来确保数据的正确获取。 4. 如果'list'属性是通过异步请求获取的,需要确保在数据返回之前,不要尝试访问该属性。可以使用v-if或v-show指令来控制组件的显示和隐藏,以避免在数据未加载完成时访问属性。 5. 如果以上步骤都没有解决问题,可以考虑检查其他相关代码,如computed属性、methods方法等,以确定是否存在其他潜在的问题。 综上所述,要解决报错"vue.runtime.esm.js:3049 TypeError: Cannot read properties of null (reading 'list')",需要检查相关组件中对'list'属性的引用,并确保该属性在使用之前已经被正确地初始化或赋值。 #### 引用[.reference_title] - *1* [解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“](https://blog.csdn.net/Shids_/article/details/125741166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue.runtime.esm.js?c320:2999 TypeError: Cannot read properties of undefined](https://blog.csdn.net/weixin_44282093/article/details/126400067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [TypeError: Cannot read properties of null (reading ‘insertBefore‘) vue项目报错](https://blog.csdn.net/a9874561328/article/details/126856243)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值