v-model 在局部组件的使用, 如何使用局部组件实现数据的共享
需要自定义两个组件
- <compa :user="username"></compa>
- <script>
- // 局部组件
- const compb={ // 定义一个 b 组件
- props:['user'],
- template:'<h2>hello ???-{{user}}</h2>'
- }
- const compa={ // 定义一个 a 组件
- props:['user'],
- template:`
- <div>
- <h1>
- hello
- </h1>
- <compb :user="user"></compb> // 把 b 组件嵌套在 a 组件里, 这里必须要加一个外层的 div 进行包裹
- </div>
- `,
- components:{
- compb
- }
- }
- var vm = new vue({
- el: "#app",
- data:{
- username:'zhangsan'
- },
- components:{
- compa,
- }
- })
- </script>
v-model 在局部组件的使用
- <custom-checkbox v-model="checkvalue"></custom-checkbox>
- <script>
- Vue.component('custom-checkbox',{
- model:{
- prop:"checked",// 默认值为: value
- event:"change",// 默认值为: input
- },
- props:{
- checked:Boolean,// 默认值为: value:String
- },
- template:`
- <input type="checkbox" :checked="checked" @change="$emit('change',$event.target.checked)"/>
- `
- })
- var vm =new Vue({
- el:"#app",
- data:{
- checkvalue:true
- }
- })
- </script>
.sync 修饰符: 可以对数据进行修改
- <custom-input :username.sync="username"></custom-input>
- <script>
- Vue.component('custom-input',{
- template:`
- <input type="text" @change="$emit('update:username',$event.target.value)"/>
- `
- })
- var vm =new Vue({
- el:"#app",
- data:{
- username:''
- },
- })
- </script>
来源: http://www.bubuko.com/infodetail-3495822.html