<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<div id="myApp">
父组件数据:{{name2}}
既然v-model是:value和@input的简化,那么<br>
<!-- 直接绑定v-model -->
<my-com v-model="name2"></my-com> <br>
</div>
<!-- 组件模板 -->
<template id='myTem'>,
<div>
<!-- 2.给子组件绑定 -->
子组件表单: <input type="text" :value="value" @input="input2">
</div>
</template>
<script>
Vue.component('myCom', {
template: '#myTem',
// 先定义一个自定义属性
props:["value"],
data() {
return {
}
},
methods:{
// 给父元素发送
input2(event){
this.$emit("input",event.target.value)
}
}
})
new Vue({
el: '#myApp',
data: {
// 1.定义父组件的数据
name2:"罗志祥"
},
})
</script>
</body>
</html>
08-23
907
907
07-31
1924
1924
03-05
416
416
05-31
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
