vue 组件 模板中根数据绑定需要指明路径并通信父
2023-09-11 14:17:23 时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
</head>
<body>
<div id="example">
<input v-model="parentsg">
<br>
<child v-bind:parentsg="parentsg"></child>
<!-- 直接绑定根数据text ,但是必须指明根数据的路径shou.text-->
<todo-item v-bind:text="shou.text"></todo-item>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
// 注册
Vue.component('child', {
props: ['parentsg'],
template: '<span>{{ parentsg}}</span>'
})
Vue.component('todo-item', {
props: ['text'],
template: '<p>{{text}}</p>'
})
// 创建根实例
new Vue({
el: '#example',
data:{
parentsg:'',
todo: {
text: 'Learn Vue',
isComplete: false
},
shou: {
text: 'shi wo ma',
isComplete: false
}
}
})
</script>
</html>
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- vue组件之间的通信
- 一套Vue的单页模板:N3-admin
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- Vue.js基础体验(一)
- vscode的vetur插件提示 [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives错误的解决办法
- vue-cli3.0 脚手架搭建项目的过程详解
- [Vue] Get up and running with vue-router
- [Vue] Use Vue.js Component Computed Properties
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- 使用vue搭建应用四引入axios
- vue-cli的webpack模板项目配置文件分析
- [Vue @Component] Simplify Vue Components with vue-class-component
- 一个典型的Vue应用的App.vue
- Vue 3 Composition API - “ref”和“reactive”
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue利用canvas将图片上传到服务器
- 【Jeecg Vue】通过getAction的finally来最大程度避免影响主数据呈现
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- Vue(二)vue 指令及用法举例
- 【三十天精通 Vue 3】 第四天 Vue 3的模板语法详解